@tellescope/react-components 1.230.2 → 1.232.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.230.2",
+  "version": "1.232.0",
   "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.230.2",
-    "@tellescope/sdk": "1.230.2",
-    "@tellescope/types-client": "1.230.2",
-    "@tellescope/types-models": "1.230.2",
-    "@tellescope/types-utilities": "1.230.2",
-    "@tellescope/utilities": "1.230.2",
-    "@tellescope/validation": "1.230.2",
+    "@tellescope/constants": "1.232.0",
+    "@tellescope/sdk": "1.232.0",
+    "@tellescope/types-client": "1.232.0",
+    "@tellescope/types-models": "1.232.0",
+    "@tellescope/types-utilities": "1.232.0",
+    "@tellescope/utilities": "1.232.0",
+    "@tellescope/validation": "1.232.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": "0bc1e80c698398e1c62c4f026fa76475883f2396",
+  "gitHead": "b79c7d50da5ff767345e58331f483cc541abef20",
   "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} />
@@ -325,7 +325,7 @@ export const QuestionForField = ({
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} />
         )
         : field.type === 'Rich Text' ? (
-          <RichText field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
+          <RichText key={field.id} field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
         )
         : field.type === 'email' ? (
           <Email field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'email'>} form={form} />

package/src/Forms/forms.v2.tsx

@@ -204,9 +204,9 @@ export const QuestionForField = ({
   ) {
       return null
   }
-  return ( 
+  return (
     // margin leaves room for error message in Question Group
-    <Flex column flex={1} style={{ marginBottom: spacing ?? 25 }} id={field.id}> 
+    <Flex column flex={1} style={{ marginBottom: spacing ?? 25 }} id={field.id}>
       {field.type !== 'Redirect' && field.title &&
         <Typography component="h4" style={{
           marginTop: 15, // ensures PDF display doesn't push description into overlap with logo / title at top of form
@@ -223,13 +223,15 @@ export const QuestionForField = ({
         <div style={{ marginTop: 15 }}></div>
       }
 
-      {feedback.length > 0 && 
+      <Description field={field} style={{ fontSize: 14, color: '#00000099', marginBottom: 11 }} />
+
+      {feedback.length > 0 &&
         <Flex column style={{ marginBottom: 11, marginTop: 3, }}>
           {feedback.map((f, i) => (
             <Typography key={i} color="error" style={{ fontSize: 20 }}>
               {f}
             </Typography>
-          ))} 
+          ))}
         </Flex>
       }
 
@@ -308,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} />
@@ -317,7 +319,7 @@ export const QuestionForField = ({
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} error={!!validationMessage && (!['A response is required', 'A value must be checked', 'A file is required', 'Enter a valid phone number', 'Insurer is required'].includes(validationMessage) || value.touched)} />
         )
         : field.type === 'Rich Text' ? (
-          <RichText field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
+          <RichText key={field.id} field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
         )
         : field.type === 'email' ? (
           <Email field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'email'>} form={form} error={!!validationMessage && (!['A response is required', 'A value must be checked', 'A file is required', 'Enter a valid phone number', 'Insurer is required'].includes(validationMessage) || value.touched)} />
@@ -435,17 +437,15 @@ export const QuestionForField = ({
         </Flex>
       )}
 
-      <Description field={field} style={{ fontSize: 14, color: '#00000099', marginTop: 4 }} />
-
       {field.type !== 'Question Group' &&
-        <Typography color="error" style={{ marginTop: 3, height: 10, fontSize: 14, marginBottom: -10 }}> 
+        <Typography color="error" style={{ marginTop: 3, height: 10, fontSize: 14, marginBottom: -10 }}>
           {(validationMessage === 'A response is required' || validationMessage === 'A value must be checked' || validationMessage === 'A file is required' || 'Enter a valid phone number' || 'Insurer is required')
-            ? value.touched 
+            ? value.touched
               ? form_display_text_for_language(form, validationMessage)
-              : null 
+              : null
             : form_display_text_for_language(form, validationMessage)
           }
-        </Typography>  
+        </Typography>
       }
     </Flex>
   )

package/src/Forms/hooks.tsx

@@ -684,7 +684,27 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     setResponses(initializeFields())
   }, [formId, initializeFields])
 
+  // Create templated versions of responses for UI display
+  // This applies template value replacements (e.g., {{enduser.BMI}}) to field titles/descriptions
+  // The templated responses are used ONLY for display and submission, not for navigation logic
+  const templatedResponses = useMemo(() => {
+    return responses.map(response => {
+      const originalField = fields.find(f => f.id === response.fieldId) || response.field
 
+      return {
+        ...response,
+        fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
+        fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
+        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+        field: {
+          ...response.field,
+          title: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
+          description: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
+          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+        }
+      }
+    })
+  }, [responses, fields, enduser])
 
   // placeholders for initial files, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fileInitRef = useRef('')
@@ -706,15 +726,28 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   }, [formId, initializeFiles])
 
   const currentValue =  (
-    responses.find(f => f.fieldId === activeField.value.id)
+    templatedResponses.find(f => f.fieldId === activeField.value.id)
   )
   const currentFileValue = (
     selectedFiles.find(f => f.fieldId === activeField.value.id)
   )
 
+  // Create templated version of activeField for UI display
+  // This applies template replacements to the field's title/description
+  const templatedActiveField = useMemo(() => {
+    const templatedResponse = templatedResponses.find(r => r.fieldId === activeField.value.id)
+    if (templatedResponse) {
+      return {
+        ...activeField,
+        value: templatedResponse.field
+      }
+    }
+    return activeField
+  }, [activeField, templatedResponses])
+
   const logicOptions: NextFieldLogicOptions = {
     urlLogicValue,
-    activeResponses: responses.filter(r => r.includeInSubmit),
+    activeResponses: templatedResponses.filter(r => r.includeInSubmit),
     dateOfBirth: enduser?.dateOfBirth,
     gender: enduser?.gender,
     state: enduser?.state,
@@ -1274,10 +1307,11 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
     if (!accessCode && session.type === 'enduser') throw new Error('enduser session without accessCode')
     try {
+      // Use templatedResponses for submission to ensure template values are resolved
       const responsesToSubmit = (
-        options?.includedFieldIds 
-          ? options.includedFieldIds.map(id => responses.find(r => r.fieldId === id)!)
-          : responses.filter(r => r.includeInSubmit)
+        options?.includedFieldIds
+          ? options.includedFieldIds.map(id => templatedResponses.find(r => r.fieldId === id)!)
+          : templatedResponses.filter(r => r.includeInSubmit)
       )
 
       // ensure Question Group responses are included
@@ -1286,7 +1320,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         if (r.answer.type !== 'Question Group') continue
 
         for (const f of r.answer.value ?? []) {
-          const match = responses.find(r => r.fieldId === f?.id)
+          const match = templatedResponses.find(r => r.fieldId === f?.id)
           if (!match || responsesToSubmit.find(r => r.fieldId === match.fieldId)) continue
 
           // hidden in group by conditional logic
@@ -1403,7 +1437,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     } finally {
       setSubmittingStatus(undefined)
     }
-  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions, handleFileUpload])
+  }, [accessCode, automationStepId, enduserId, responses, templatedResponses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions, handleFileUpload])
 
   const isNextDisabled = useCallback(() => {
     if (uploadingFiles.length) { return true }
@@ -1419,30 +1453,6 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     return false
   }, [activeField, validateField, uploadingFiles])
 
-  // Helper function to apply templating to responses
-  // Templates field titles/descriptions with current enduser data and form response values
-  // Can be called whenever we need to update templates (e.g., on "next" button click)
-  const applyTemplatingToResponses = useCallback((
-    currentResponses: Response[]
-  ): Response[] => {
-    return currentResponses.map(response => {
-      const originalField = fields.find(f => f.id === response.fieldId) || response.field
-
-      return {
-        ...response,
-        fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
-        fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
-        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
-        field: {
-          ...response.field,
-          title: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
-          description: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
-          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
-        }
-      }
-    })
-  }, [fields, enduser])
-
   const autoAdvanceRef = useRef(false)
   // don't make option, to avoid user passing invalid data, like an onclick event
   const goToNextField = useCallback((answer: FormResponseValue['answer'] | undefined) => {
@@ -1450,24 +1460,10 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
     console.log('going to next field')
-
-    // If an answer is provided (e.g., from Hidden Value), update responses first
-    const responsesWithAnswer = answer
-      ? responses.map(r =>
-          r.fieldId === currentValue.fieldId
-            ? { ...r, answer }
-            : r
-        )
-      : responses
-
-    // Apply templating to all responses including the newly updated answer
-    const templatedResponses = applyTemplatingToResponses(responsesWithAnswer)
-    setResponses(templatedResponses)
-
     if (currentValue.answer.type === 'Question Group') {
       const responsesToSave = (
         (currentValue.field.options?.subFields || [])
-        .map(({ id }) => templatedResponses.find(f => f.fieldId === id)!)
+        .map(({ id }) => responses.find(f => f.fieldId === id)!)
         .filter(f => f && f?.answer.type !== 'file' && f?.answer.type !== 'files')
       )
       if (responsesToSave.length) {
@@ -1478,7 +1474,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         })
         .catch(console.error)
       }
-    }
+    } 
     else if (currentValue?.answer?.type !== 'file' && currentValue?.answer?.type !== 'files' && (formResponseId || accessCode)) {
       session.api.form_responses.save_field_response({
         accessCode,
@@ -1493,26 +1489,17 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
     try { window.scrollTo({ top: 0 }) } catch(err) {} // scroll to top if needed
     setActiveField(activeField => {
-      let newField = getNextField(activeField, currentValue, templatedResponses, logicOptions)
+      let newField = getNextField(activeField, currentValue, responses, logicOptions)
 
       // when autoadvancing, prevent adding duplicates by checking whether already on stack
       if (newField !== undefined && !prevFieldStackRef.current.find(v => v.value.id === activeField?.value.id)) {
         prevFieldStackRef.current.push(activeField)
         setCurrentPageIndex(i => i + 1)
       }
-
-      const fieldToReturn = newField || activeField
-
-      // Apply templating to the active field by pulling from the templated responses
-      // This ensures the UI displays templated titles/descriptions immediately
-      const templatedResponse = templatedResponses.find(r => r.fieldId === fieldToReturn.value.id)
-      if (templatedResponse) {
-        fieldToReturn.value = templatedResponse.field
-      }
-
-      return fieldToReturn
+      
+      return newField || activeField
     })
-  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex, applyTemplatingToResponses])
+  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex])
 
   useEffect(() => {
     if (dontAutoadvance) return
@@ -1636,12 +1623,12 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   return {
     enduserId,
     formResponseId,
-    activeField,
+    activeField: templatedActiveField, // Use templated activeField for UI display
     currentValue,
     currentFileValue,
     getResponsesWithQuestionGroupAnswers,
     fields,
-    responses,
+    responses: templatedResponses, // Use templated responses - only display fields differ, answer values unchanged
     selectedFiles,
     onFieldChange,
     onAddFile,

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormContr
 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';
@@ -1703,7 +1703,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 +1729,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 +1827,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 +1868,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 +1929,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
@@ -3126,7 +3193,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 +3268,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 +3322,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>