@tellescope/react-components 1.231.0 → 1.232.1

package/lib/esm/Forms/inputs.js

@@ -72,10 +72,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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, TextField, 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, TextField, Typography } from "@mui/material";
 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 { TIMEZONES_USA } from "@tellescope/types-models";
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation";
 import Slider from '@mui/material/Slider';
@@ -93,6 +93,15 @@ 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";
+// Debounce hook for search functionality
+var useDebounce = function (value, delay) {
+    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        var handler = setTimeout(function () { return setDebouncedValue(value); }, delay);
+        return function () { return clearTimeout(handler); };
+    }, [value, delay]);
+    return debouncedValue;
+};
 export var LanguageSelect = function (_a) {
     var value = _a.value, props = __rest(_a, ["value"]);
     return (_jsxs(Grid, __assign({ container: true, alignItems: "center", justifyContent: "center", wrap: "nowrap", spacing: 1 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(LanguageIcon, { color: "primary" }) })), _jsx(Grid, __assign({ item: true, style: { width: 150 } }, { children: _jsx(StringSelector, __assign({}, props, { options: ["English", "Español"], size: "small", value: value === 'Spanish' ? 'Español' : value, label: (value === 'Español' || value === 'Spanish') ? 'Idioma'
@@ -808,20 +817,59 @@ export var MultipleChoiceInput = function (_a) {
                                     ? __spreadArray(__spreadArray([], (value !== null && value !== void 0 ? value : []).filter(function (v) { return v !== otherString; }), true), [e.target.value], false) : value === null || value === void 0 ? void 0 : value.filter(function (v) { return v !== otherString; }))), field.id);
                         } }) }))] })));
 };
+// Helper to emit GTM purchase event for Stripe payments (single source of truth)
+var emitStripePurchaseEvent = function (field, cost) {
+    var _a;
+    emit_gtm_event({
+        event: 'form_purchase',
+        productIds: ((_a = field.options) === null || _a === void 0 ? void 0 : _a.productIds) || [],
+        fieldId: field.id,
+        value: cost / 100,
+        currency: 'USD',
+    });
+};
 export var StripeInput = function (_a) {
-    var _b, _d;
-    var field = _a.field, value = _a.value, onChange = _a.onChange, setCustomerId = _a.setCustomerId, enduserId = _a.enduserId;
+    var _b, _d, _e;
+    var field = _a.field, value = _a.value, onChange = _a.onChange, setCustomerId = _a.setCustomerId, enduserId = _a.enduserId, form = _a.form, responses = _a.responses, enduser = _a.enduser;
     var session = useResolvedSession();
-    var _e = useState(''), clientSecret = _e[0], setClientSecret = _e[1];
-    var _f = useState(''), businessName = _f[0], setBusinessName = _f[1];
-    var _g = useState(false), isCheckout = _g[0], setIsCheckout = _g[1];
-    var _h = useState(), stripePromise = _h[0], setStripePromise = _h[1];
-    var _j = useState(''), answertext = _j[0], setAnswertext = _j[1];
-    var _k = useState(''), error = _k[0], setError = _k[1];
-    var _l = useState([]), selectedProducts = _l[0], setSelectedProducts = _l[1];
-    var _m = useState(false), showProductSelection = _m[0], setShowProductSelection = _m[1];
-    var _o = useState([]), availableProducts = _o[0], setAvailableProducts = _o[1];
-    var _p = useState(false), loadingProducts = _p[0], setLoadingProducts = _p[1];
+    var _f = useState(''), clientSecret = _f[0], setClientSecret = _f[1];
+    var _g = useState(''), businessName = _g[0], setBusinessName = _g[1];
+    var _h = useState(false), isCheckout = _h[0], setIsCheckout = _h[1];
+    var _j = useState(), stripePromise = _j[0], setStripePromise = _j[1];
+    var _k = useState(''), answertext = _k[0], setAnswertext = _k[1];
+    var _l = useState(''), error = _l[0], setError = _l[1];
+    var _m = useState([]), selectedProducts = _m[0], setSelectedProducts = _m[1];
+    var _o = useState(false), showProductSelection = _o[0], setShowProductSelection = _o[1];
+    var _p = useState([]), availableProducts = _p[0], setAvailableProducts = _p[1];
+    var _q = useState(false), loadingProducts = _q[0], setLoadingProducts = _q[1];
+    // Compute visible products based on conditional logic
+    var visibleProducts = useMemo(function () {
+        if (!showProductSelection || availableProducts.length === 0) {
+            return availableProducts;
+        }
+        return availableProducts.filter(function (product) {
+            var _a, _b;
+            // Find condition for this product
+            var productCondition = (_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a.productConditions) === null || _b === void 0 ? void 0 : _b.find(function (c) { return c.productId === product._id; });
+            // If no condition defined, show by default
+            if (!(productCondition === null || productCondition === void 0 ? void 0 : productCondition.showCondition) || object_is_empty(productCondition.showCondition)) {
+                return true;
+            }
+            // Evaluate condition against current form responses
+            return responses_satisfy_conditions(responses || [], productCondition.showCondition, {
+                dateOfBirth: enduser === null || enduser === void 0 ? void 0 : enduser.dateOfBirth,
+                gender: enduser === null || enduser === void 0 ? void 0 : enduser.gender,
+                state: enduser === null || enduser === void 0 ? void 0 : enduser.state,
+                form: form,
+                activeResponses: responses,
+            });
+        });
+    }, [availableProducts, (_b = field.options) === null || _b === void 0 ? void 0 : _b.productConditions, responses, showProductSelection, enduser, form]);
+    // Automatically deselect products that become hidden
+    useEffect(function () {
+        var visibleProductIds = visibleProducts.map(function (p) { return p._id; });
+        setSelectedProducts(function (prev) { return prev.filter(function (id) { return visibleProductIds.includes(id); }); });
+    }, [visibleProducts]);
     var fetchRef = useRef(false);
     useEffect(function () {
         var _a, _b, _d;
@@ -887,6 +935,16 @@ export var StripeInput = function (_a) {
         }, 0)
         : 0 // Will be calculated by existing Stripe flow when not in selection mode
     );
+    // Emit GTM purchase event once when success screen is displayed
+    var purchaseEmittedRef = useRef(false);
+    useEffect(function () {
+        var _a;
+        // Only emit for actual purchases (chargeImmediately), not for saving card details
+        if (value && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.chargeImmediately) && !purchaseEmittedRef.current) {
+            emitStripePurchaseEvent(field, cost);
+            purchaseEmittedRef.current = true;
+        }
+    }, [value, field, cost]);
     // Handle product selection step
     if (showProductSelection) {
         if (error) {
@@ -895,7 +953,11 @@ export var StripeInput = function (_a) {
         if (loadingProducts) {
             return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 2, alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(LinearProgress, {}) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, { children: "Loading product information..." }) }))] })));
         }
-        var isSingleSelection_1 = ((_b = field.options) === null || _b === void 0 ? void 0 : _b.radio) === true;
+        // Check if all products are filtered out by conditional logic
+        if (visibleProducts.length === 0) {
+            return (_jsx(Grid, __assign({ container: true, direction: "column", spacing: 2, alignItems: "center" }, { children: _jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ color: "textSecondary" }, { children: "No products are available based on your previous answers." })) })) })));
+        }
+        var isSingleSelection_1 = ((_d = field.options) === null || _d === void 0 ? void 0 : _d.radio) === true;
         var handleProductSelection_1 = function (productId) {
             if (isSingleSelection_1) {
                 setSelectedProducts([productId]);
@@ -932,7 +994,7 @@ export var StripeInput = function (_a) {
                 }
             });
         };
-        return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsxs(Typography, __assign({ variant: "h6" }, { children: ["Select Product", isSingleSelection_1 ? '' : 's'] })) })), availableProducts.map(function (product) {
+        return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsxs(Typography, __assign({ variant: "h6" }, { children: ["Select Product", isSingleSelection_1 ? '' : 's'] })) })), visibleProducts.map(function (product) {
                     var _a, _b, _d;
                     // Use real-time Stripe pricing if available, fallback to Tellescope pricing
                     var price = product.currentPrice || product.cost;
@@ -945,7 +1007,7 @@ export var StripeInput = function (_a) {
         return (_jsx(Typography, __assign({ color: "error" }, { children: error })));
     }
     if (value) {
-        return (_jsxs(Grid, __assign({ container: true, alignItems: "center", wrap: "nowrap" }, { children: [_jsx(CheckCircleOutline, { color: "success" }), _jsx(Typography, __assign({ sx: { ml: 1, fontSize: 20 } }, { children: ((_d = field.options) === null || _d === void 0 ? void 0 : _d.chargeImmediately) ? 'Your purchase was successful' : "Your payment details have been saved!" }))] })));
+        return (_jsxs(Grid, __assign({ container: true, alignItems: "center", wrap: "nowrap" }, { children: [_jsx(CheckCircleOutline, { color: "success" }), _jsx(Typography, __assign({ sx: { ml: 1, fontSize: 20 } }, { children: ((_e = field.options) === null || _e === void 0 ? void 0 : _e.chargeImmediately) ? 'Your purchase was successful' : "Your payment details have been saved!" }))] })));
     }
     if (!(clientSecret && stripePromise))
         return _jsx(LinearProgress, {});
@@ -1050,26 +1112,30 @@ export var DropdownInput = function (_a) {
 var choicesForDatabase = {};
 var preventRefetch = {};
 var LOAD_CHOICES_LIMIT = 500;
+var MIN_SEARCH_CHARS = 3;
+var SEARCH_DEBOUNCE_MS = 300;
 var useDatabaseChoices = function (_a) {
-    var _b, _d, _e, _f;
-    var _g = _a.databaseId, databaseId = _g === void 0 ? '' : _g, field = _a.field, otherAnswers = _a.otherAnswers;
+    var _b, _d;
+    var _e = _a.databaseId, databaseId = _e === void 0 ? '' : _e, field = _a.field, otherAnswers = _a.otherAnswers, _f = _a.searchQuery, searchQuery = _f === void 0 ? '' : _f;
     var session = useResolvedSession();
-    var _h = useState(0), renderCount = _h[0], setRenderCount = _h[1];
-    // todo: make searchable, don't load all
+    var _g = useState(false), isSearching = _g[0], setIsSearching = _g[1];
+    var _h = useState([]), searchResults = _h[0], setSearchResults = _h[1];
+    var _j = useState(false), initialLoadComplete = _j[0], setInitialLoadComplete = _j[1];
+    var debouncedSearch = useDebounce(searchQuery, SEARCH_DEBOUNCE_MS);
+    // Load initial page on mount (only once, not recursively)
+    var initialLoadRef = useRef(false);
     useEffect(function () {
-        var _a, _b, _d, _e;
-        if ((_a = choicesForDatabase[databaseId]) === null || _a === void 0 ? void 0 : _a.done)
+        var _a, _b, _d;
+        if (initialLoadRef.current)
             return;
-        if (renderCount > 100)
-            return; // limit to 50000 entries / prevent infinite looping
-        var choices = (_d = (_b = choicesForDatabase[databaseId]) === null || _b === void 0 ? void 0 : _b.records) !== null && _d !== void 0 ? _d : [];
-        var lastId = (_e = choicesForDatabase[databaseId]) === null || _e === void 0 ? void 0 : _e.lastId;
-        if (preventRefetch[databaseId + field.id + lastId])
+        if (((_a = choicesForDatabase[databaseId]) === null || _a === void 0 ? void 0 : _a.done) || ((_d = (_b = choicesForDatabase[databaseId]) === null || _b === void 0 ? void 0 : _b.records) === null || _d === void 0 ? void 0 : _d.length)) {
+            setInitialLoadComplete(true);
             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: lastId,
             limit: LOAD_CHOICES_LIMIT,
             databaseId: databaseId,
         })
@@ -1078,17 +1144,67 @@ var useDatabaseChoices = function (_a) {
             var newChoices = _a.choices;
             choicesForDatabase[databaseId] = {
                 lastId: (_b = newChoices === null || newChoices === void 0 ? void 0 : newChoices[newChoices.length - 1]) === null || _b === void 0 ? void 0 : _b.id,
-                records: __spreadArray(__spreadArray([], choices, true), newChoices, true).sort(function (c1, c2) { return (label_for_database_record(field, c1)
+                records: newChoices.sort(function (c1, c2) { return (label_for_database_record(field, c1)
                     .localeCompare(label_for_database_record(field, c2))); }),
-                done: newChoices.length < LOAD_CHOICES_LIMIT,
+                done: true, // Don't load more pages automatically
             };
-            setRenderCount(function (r) { return r + 1; });
+            setInitialLoadComplete(true);
+        })
+            .catch(function (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
+    var searchRef = useRef(debouncedSearch);
+    useEffect(function () {
+        var 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: databaseId,
+            search: trimmed,
+        })
+            .then(function (_a) {
+            var _b, _d;
+            var newChoices = _a.choices;
+            // Add search results to the same cache as initial load
+            // This ensures selected search results persist even after search is cleared
+            var existingRecords = (_d = (_b = choicesForDatabase[databaseId]) === null || _b === void 0 ? void 0 : _b.records) !== null && _d !== void 0 ? _d : [];
+            var existingIds = new Set(existingRecords.map(function (r) { return r.id; }));
+            var uniqueNewChoices = newChoices.filter(function (c) { return !existingIds.has(c.id); });
+            if (uniqueNewChoices.length > 0) {
+                choicesForDatabase[databaseId] = __assign(__assign({}, choicesForDatabase[databaseId]), { records: __spreadArray(__spreadArray([], existingRecords, true), uniqueNewChoices, true).sort(function (c1, c2) { return (label_for_database_record(field, c1)
+                        .localeCompare(label_for_database_record(field, c2))); }), done: true });
+            }
+            setSearchResults(newChoices.sort(function (c1, c2) { return (label_for_database_record(field, c1)
+                .localeCompare(label_for_database_record(field, c2))); }));
+            setIsSearching(false);
         })
             .catch(function (err) {
             console.error(err);
-            preventRefetch[databaseId + field.id + lastId] = false;
+            setIsSearching(false);
         });
-    }, [session, field, databaseId, renderCount]);
+    }, [session, field, databaseId, debouncedSearch]);
     var addChoice = useCallback(function (record) {
         if (!choicesForDatabase[databaseId]) {
             choicesForDatabase[databaseId] = {
@@ -1098,10 +1214,15 @@ var useDatabaseChoices = function (_a) {
         }
         choicesForDatabase[databaseId].records.push(record);
     }, [choicesForDatabase, databaseId]);
+    // Use search results if searching, otherwise use cached initial results
+    var activeChoices = debouncedSearch.trim().length >= MIN_SEARCH_CHARS
+        ? searchResults
+        : ((_d = (_b = choicesForDatabase[databaseId]) === null || _b === void 0 ? void 0 : _b.records) !== null && _d !== void 0 ? _d : []);
     return {
         addChoice: addChoice,
-        doneLoading: (_d = (_b = choicesForDatabase[databaseId]) === null || _b === void 0 ? void 0 : _b.done) !== null && _d !== void 0 ? _d : false,
-        choices: __spreadArray(__spreadArray([], (_f = (_e = choicesForDatabase[databaseId]) === null || _e === void 0 ? void 0 : _e.records) !== null && _f !== void 0 ? _f : [], true), (otherAnswers || []).map(function (v) {
+        doneLoading: initialLoadComplete,
+        isSearching: isSearching,
+        choices: __spreadArray(__spreadArray([], activeChoices, true), (otherAnswers || []).map(function (v) {
             var _a;
             return ({
                 id: v.text,
@@ -1109,7 +1230,7 @@ var useDatabaseChoices = function (_a) {
                 values: [{ label: ((_a = field.options) === null || _a === void 0 ? void 0 : _a.databaseLabel) || '', type: 'Text', value: v.text }],
             });
         }), true),
-        renderCount: renderCount,
+        minSearchChars: MIN_SEARCH_CHARS,
     };
 };
 var label_for_database_record = function (field, record) {
@@ -1141,13 +1262,15 @@ var get_other_answers = function (_value, typing) {
 };
 export var DatabaseSelectInput = function (_a) {
     var _b, _d, _e, _f, _g, _h, _j, _k;
-    var AddToDatabase = _a.AddToDatabase, field = _a.field, _value = _a.value, onChange = _a.onChange, onDatabaseSelect = _a.onDatabaseSelect, responses = _a.responses, size = _a.size, disabled = _a.disabled, enduser = _a.enduser;
+    var AddToDatabase = _a.AddToDatabase, field = _a.field, _value = _a.value, onChange = _a.onChange, onDatabaseSelect = _a.onDatabaseSelect, responses = _a.responses, size = _a.size, disabled = _a.disabled, enduser = _a.enduser, inputProps = _a.inputProps;
     var _l = useState(''), typing = _l[0], setTyping = _l[1];
-    var _m = useDatabaseChoices({
+    var _m = useState(false), open = _m[0], setOpen = _m[1];
+    var _o = useDatabaseChoices({
         databaseId: (_b = field.options) === null || _b === void 0 ? void 0 : _b.databaseId,
         field: field,
         otherAnswers: get_other_answers(_value, ((_d = field === null || field === void 0 ? void 0 : field.options) === null || _d === void 0 ? void 0 : _d.other) ? typing : undefined),
-    }), addChoice = _m.addChoice, choices = _m.choices, doneLoading = _m.doneLoading;
+        searchQuery: typing,
+    }), addChoice = _o.addChoice, choices = _o.choices, doneLoading = _o.doneLoading, isSearching = _o.isSearching, minSearchChars = _o.minSearchChars;
     var value = React.useMemo(function () {
         var _a, _b;
         try {
@@ -1251,9 +1374,13 @@ export var DatabaseSelectInput = function (_a) {
         }
         return filtered;
     }, [field, stateFilteredChoices]);
+    // Show placeholder when typing but below minimum search characters
+    var charsNeeded = typing.trim().length > 0 && typing.trim().length < minSearchChars
+        ? minSearchChars - typing.trim().length
+        : 0;
     if (!doneLoading)
         return _jsx(LinearProgress, {});
-    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { id: field.id, freeSolo: false, size: size, componentsProps: { popper: { sx: { wordBreak: "break-word" } } }, options: filteredChoices, multiple: true, getOptionLabel: function (o) { return (Array.isArray(o) // edge case
+    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { id: field.id, freeSolo: false, size: size, componentsProps: { popper: { sx: { wordBreak: "break-word" } } }, options: filteredChoices, multiple: true, loading: isSearching, open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, getOptionLabel: function (o) { return (Array.isArray(o) // edge case
                     ? ''
                     : label_for_database_record(field, o)); }, value: value, disabled: disabled, onChange: function (_, v) {
                     var _a, _b, _d, _e, _f;
@@ -1276,7 +1403,7 @@ export var DatabaseSelectInput = function (_a) {
                                 recordId: (_f = (_e = v[v.length - 1]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : '',
                                 text: label_for_database_record(field, v[v.length - 1]),
                             }]), field.id);
-                }, inputValue: typing, onInputChange: function (e, v) { return e && setTyping(v); }, renderInput: function (params) { return _jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: defaultInputProps.sx }) })); }, 
+                }, inputValue: typing, onInputChange: function (e, v) { return e && setTyping(v); }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: (inputProps || defaultInputProps).sx, endAdornment: (_jsxs(_Fragment, { children: [isSearching ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }), placeholder: charsNeeded > 0 ? "Type ".concat(charsNeeded, " more character").concat(charsNeeded > 1 ? 's' : '', " to search...") : undefined, helperText: charsNeeded > 0 ? "Type ".concat(charsNeeded, " more character").concat(charsNeeded > 1 ? 's' : '', " to search") : undefined }))); }, 
                 // use custom Chip to ensure very long entries break properly (whitespace: normal)
                 renderTags: function (value, getTagProps) {
                     return value.map(function (value, index) { return (_jsx(Chip, __assign({ label: _jsx(Typography, __assign({ style: { whiteSpace: 'normal' } }, { children: Array.isArray(value) ? '' : label_for_database_record(field, value) })) }, getTagProps({ index: index }), { sx: { height: "100%", py: 0.5 } }))); });
@@ -1652,7 +1779,7 @@ export var contact_is_valid = function (e) {
 };
 export var RelatedContactsInput = function (_a) {
     var _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w, _x;
-    var field = _a.field, _value = _a.value, onChange = _a.onChange, props = __rest(_a, ["field", "value", "onChange"]);
+    var field = _a.field, _value = _a.value, onChange = _a.onChange, parentError = _a.error, props = __rest(_a, ["field", "value", "onChange", "error"]);
     // safeguard against any rogue values like empty string
     var value = Array.isArray(_value) ? _value : [];
     var _y = useState(value.length === 1 ? 0 : -1), editing = _y[0], setEditing = _y[1];
@@ -1671,7 +1798,7 @@ export var RelatedContactsInput = function (_a) {
                                 _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(TextField, { label: "Last Name", size: "small", fullWidth: true, InputProps: defaultInputProps, value: lname, onChange: function (e) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { lname: e.target.value }) : v; }), field.id); } }) })), _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(StringSelector, { options: ((_j = (_h = field.options) === null || _h === void 0 ? void 0 : _h.relatedContactTypes) === null || _j === void 0 ? void 0 : _j.length) ? field.options.relatedContactTypes : RELATIONSHIP_TYPES, label: "Relationship", size: "small", disabled: ((_l = (_k = field === null || field === void 0 ? void 0 : field.options) === null || _k === void 0 ? void 0 : _k.relatedContactTypes) === null || _l === void 0 ? void 0 : _l.length) === 1, value: (_o = (_m = relationships === null || relationships === void 0 ? void 0 : relationships[0]) === null || _m === void 0 ? void 0 : _m.type) !== null && _o !== void 0 ? _o : '', onChange: function (type) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { relationships: [{ type: type, id: '' /* to be filled on server-side */ }] }) : v; }), field.id); } }) }))] })) })), _jsx(Grid, __assign({ item: true }, { children: _jsxs(Grid, __assign({ container: true, alignItems: "center", wrap: "nowrap", spacing: 1 }, { children: [!((_q = (_p = field.options) === null || _p === void 0 ? void 0 : _p.hiddenDefaultFields) === null || _q === void 0 ? void 0 : _q.includes('Date of Birth')) &&
                                 _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(DateStringInput, { value: dateOfBirth, field: __assign(__assign({}, field), { isOptional: true }), size: "small", label: "Date of Birth (MM-DD-YYYY)", onChange: function (dateOfBirth) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { dateOfBirth: dateOfBirth }) : v; }), field.id); } }) })), !((_s = (_r = field.options) === null || _r === void 0 ? void 0 : _r.hiddenDefaultFields) === null || _s === void 0 ? void 0 : _s.includes('Email')) &&
                                 _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(TextField, { label: "Email", size: "small", fullWidth: true, type: "email", InputProps: defaultInputProps, value: email, onChange: function (e) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { email: e.target.value }) : v; }), field.id); } }) })), !((_u = (_t = field.options) === null || _t === void 0 ? void 0 : _t.hiddenDefaultFields) === null || _u === void 0 ? void 0 : _u.includes('Phone Number')) &&
-                                _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(TextField, { label: "Phone Number", size: "small", fullWidth: true, InputProps: defaultInputProps, value: phone, onChange: function (e) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { phone: e.target.value }) : v; }), field.id); } }) }))] })) })), (((_w = field.options) === null || _w === void 0 ? void 0 : _w.tableChoices) || []).length > 0 &&
+                                _jsx(Grid, __assign({ item: true, xs: 4 }, { children: _jsx(TextField, { label: "Phone Number", size: "small", fullWidth: true, InputProps: defaultInputProps, value: phone, onChange: function (e) { return onChange(value.map(function (v, i) { return i === editing ? __assign(__assign({}, v), { phone: e.target.value.trim() }) : v; }), field.id); } }) }))] })) })), (((_w = field.options) === null || _w === void 0 ? void 0 : _w.tableChoices) || []).length > 0 &&
                     _jsx(Grid, __assign({ item: true }, { children: _jsx(Grid, __assign({ container: true, spacing: 1 }, { children: (((_x = field.options) === null || _x === void 0 ? void 0 : _x.tableChoices) || []).map(function (_a, i) {
                                 var info = _a.info, label = _a.label, type = _a.type;
                                 return (_jsx(Grid, __assign({ item: true, xs: 6 }, { children: type === 'Text'
@@ -1691,7 +1818,7 @@ export var RelatedContactsInput = function (_a) {
                                                             return i === editing ? __assign(__assign({}, v), { fields: __assign(__assign({}, fields_1), (_a = {}, _a[label] = e.target.value, _a)) }) : v;
                                                         }), field.id); } }, { children: [_jsx(MenuItem, __assign({ value: "" }, { children: _jsx("em", { children: "None" }) })), info.choices.map(function (c) { return (_jsx(MenuItem, __assign({ value: c }, { children: c }), c)); })] }))] })))
                                                 : null }), i));
-                            }) })) })), _jsx(Grid, __assign({ item: true, sx: { my: 0.75 } }, { children: _jsx(Button, __assign({ variant: "outlined", onClick: function () { return setEditing(-1); }, size: "small" }, { children: "Save Contact" })) })), errorMessage &&
+                            }) })) })), _jsx(Grid, __assign({ item: true, sx: { my: 0.75 } }, { children: _jsx(Button, __assign({ variant: "outlined", onClick: function () { return setEditing(-1); }, size: "small", disabled: !!errorMessage || !!parentError }, { children: "Save Contact" })) })), errorMessage &&
                     _jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ color: "error" }, { children: errorMessage })) }))] })));
     }
     return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 1 }, { children: [_jsx(Grid, __assign({ item: true }, { children: value.map(function (contact, i) { return (_jsx(Grid, __assign({ item: true }, { children: _jsxs(Grid, __assign({ container: true, alignItems: "center", justifyContent: "space-between", wrap: "nowrap", spacing: 1 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [_jsx(IconButton, __assign({ onClick: function () { return setEditing(i); }, color: "primary", size: "small" }, { children: _jsx(Edit, {}) })), _jsx(Typography, __assign({ noWrap: true }, { children: user_display_name(contact) || "Unnamed Contact ".concat(i + 1) }))] })) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(LabeledIconButton, { Icon: Delete, label: "Remove", onClick: function () { return onChange(value.filter(function (v, _i) { return i !== _i; }), field.id); } }) }))] })) }), i)); }) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Button, __assign({ variant: "contained", onClick: handleAddContact }, { children: "Add Contact" })) }))] })));