@tellescope/react-components 1.231.0 → 1.232.1

package/lib/cjs/Forms/inputs.js

@@ -122,6 +122,15 @@ var react_stripe_js_1 = require("@stripe/react-stripe-js");
 var stripe_js_1 = require("@stripe/stripe-js");
 var icons_material_1 = require("@mui/icons-material");
 var wysiwyg_1 = require("./wysiwyg");
+// Debounce hook for search functionality
+var useDebounce = function (value, delay) {
+    var _a = (0, react_1.useState)(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handler = setTimeout(function () { return setDebouncedValue(value); }, delay);
+        return function () { return clearTimeout(handler); };
+    }, [value, delay]);
+    return debouncedValue;
+};
 var LanguageSelect = function (_a) {
     var value = _a.value, props = __rest(_a, ["value"]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, alignItems: "center", justifyContent: "center", wrap: "nowrap", spacing: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(Language_1.default, { color: "primary" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, style: { width: 150 } }, { children: (0, jsx_runtime_1.jsx)(StringSelector, __assign({}, props, { options: ["English", "Español"], size: "small", value: value === 'Spanish' ? 'Español' : value, label: (value === 'Español' || value === 'Spanish') ? 'Idioma'
@@ -861,20 +870,59 @@ var MultipleChoiceInput = function (_a) {
                         } }) }))] })));
 };
 exports.MultipleChoiceInput = MultipleChoiceInput;
+// Helper to emit GTM purchase event for Stripe payments (single source of truth)
+var emitStripePurchaseEvent = function (field, cost) {
+    var _a;
+    (0, utilities_1.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',
+    });
+};
 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 = (0, __1.useResolvedSession)();
-    var _e = (0, react_1.useState)(''), clientSecret = _e[0], setClientSecret = _e[1];
-    var _f = (0, react_1.useState)(''), businessName = _f[0], setBusinessName = _f[1];
-    var _g = (0, react_1.useState)(false), isCheckout = _g[0], setIsCheckout = _g[1];
-    var _h = (0, react_1.useState)(), stripePromise = _h[0], setStripePromise = _h[1];
-    var _j = (0, react_1.useState)(''), answertext = _j[0], setAnswertext = _j[1];
-    var _k = (0, react_1.useState)(''), error = _k[0], setError = _k[1];
-    var _l = (0, react_1.useState)([]), selectedProducts = _l[0], setSelectedProducts = _l[1];
-    var _m = (0, react_1.useState)(false), showProductSelection = _m[0], setShowProductSelection = _m[1];
-    var _o = (0, react_1.useState)([]), availableProducts = _o[0], setAvailableProducts = _o[1];
-    var _p = (0, react_1.useState)(false), loadingProducts = _p[0], setLoadingProducts = _p[1];
+    var _f = (0, react_1.useState)(''), clientSecret = _f[0], setClientSecret = _f[1];
+    var _g = (0, react_1.useState)(''), businessName = _g[0], setBusinessName = _g[1];
+    var _h = (0, react_1.useState)(false), isCheckout = _h[0], setIsCheckout = _h[1];
+    var _j = (0, react_1.useState)(), stripePromise = _j[0], setStripePromise = _j[1];
+    var _k = (0, react_1.useState)(''), answertext = _k[0], setAnswertext = _k[1];
+    var _l = (0, react_1.useState)(''), error = _l[0], setError = _l[1];
+    var _m = (0, react_1.useState)([]), selectedProducts = _m[0], setSelectedProducts = _m[1];
+    var _o = (0, react_1.useState)(false), showProductSelection = _o[0], setShowProductSelection = _o[1];
+    var _p = (0, react_1.useState)([]), availableProducts = _p[0], setAvailableProducts = _p[1];
+    var _q = (0, react_1.useState)(false), loadingProducts = _q[0], setLoadingProducts = _q[1];
+    // Compute visible products based on conditional logic
+    var visibleProducts = (0, react_1.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) || (0, utilities_1.object_is_empty)(productCondition.showCondition)) {
+                return true;
+            }
+            // Evaluate condition against current form responses
+            return (0, utilities_1.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
+    (0, react_1.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 = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(function () {
         var _a, _b, _d;
@@ -940,6 +988,16 @@ 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 = (0, react_1.useRef)(false);
+    (0, react_1.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) {
@@ -948,7 +1006,11 @@ var StripeInput = function (_a) {
         if (loadingProducts) {
             return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, direction: "column", spacing: 2, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true, direction: "column", spacing: 2, alignItems: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.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]);
@@ -985,7 +1047,7 @@ var StripeInput = function (_a) {
                 }
             });
         };
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, direction: "column", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "h6" }, { children: ["Select Product", isSingleSelection_1 ? '' : 's'] })) })), availableProducts.map(function (product) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, direction: "column", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.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;
@@ -998,7 +1060,7 @@ var StripeInput = function (_a) {
         return ((0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ color: "error" }, { children: error })));
     }
     if (value) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, alignItems: "center", wrap: "nowrap" }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.CheckCircleOutline, { color: "success" }), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, alignItems: "center", wrap: "nowrap" }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.CheckCircleOutline, { color: "success" }), (0, jsx_runtime_1.jsx)(material_1.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 (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {});
@@ -1106,26 +1168,30 @@ exports.DropdownInput = DropdownInput;
 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 = (0, __1.useResolvedSession)();
-    var _h = (0, react_1.useState)(0), renderCount = _h[0], setRenderCount = _h[1];
-    // todo: make searchable, don't load all
+    var _g = (0, react_1.useState)(false), isSearching = _g[0], setIsSearching = _g[1];
+    var _h = (0, react_1.useState)([]), searchResults = _h[0], setSearchResults = _h[1];
+    var _j = (0, react_1.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 = (0, react_1.useRef)(false);
     (0, react_1.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,
         })
@@ -1134,17 +1200,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 = (0, react_1.useRef)(debouncedSearch);
+    (0, react_1.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 = (0, react_1.useCallback)(function (record) {
         if (!choicesForDatabase[databaseId]) {
             choicesForDatabase[databaseId] = {
@@ -1154,10 +1270,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,
@@ -1165,7 +1286,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) {
@@ -1197,13 +1318,15 @@ var get_other_answers = function (_value, typing) {
 };
 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 = (0, react_1.useState)(''), typing = _l[0], setTyping = _l[1];
-    var _m = useDatabaseChoices({
+    var _m = (0, react_1.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_1.default.useMemo(function () {
         var _a, _b;
         try {
@@ -1307,9 +1430,13 @@ 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 (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {});
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.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;
@@ -1332,7 +1459,7 @@ 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 (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: exports.defaultInputProps.sx }) })); }, 
+                }, inputValue: typing, onInputChange: function (e, v) { return e && setTyping(v); }, renderInput: function (params) { return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: (inputProps || exports.defaultInputProps).sx, endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSearching ? (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Chip, __assign({ label: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ style: { whiteSpace: 'normal' } }, { children: Array.isArray(value) ? '' : label_for_database_record(field, value) })) }, getTagProps({ index: index }), { sx: { height: "100%", py: 0.5 } }))); });
@@ -1713,7 +1840,7 @@ var contact_is_valid = function (e) {
 exports.contact_is_valid = contact_is_valid;
 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 = (0, react_1.useState)(value.length === 1 ? 0 : -1), editing = _y[0], setEditing = _y[1];
@@ -1732,7 +1859,7 @@ var RelatedContactsInput = function (_a) {
                                 (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Last Name", size: "small", fullWidth: true, InputProps: exports.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); } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.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 : constants_1.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); } }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.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')) &&
                                 (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(exports.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')) &&
                                 (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Email", size: "small", fullWidth: true, type: "email", InputProps: exports.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')) &&
-                                (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Phone Number", size: "small", fullWidth: true, InputProps: exports.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 &&
+                                (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Phone Number", size: "small", fullWidth: true, InputProps: exports.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 &&
                     (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6 }, { children: type === 'Text'
@@ -1752,7 +1879,7 @@ 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: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "" }, { children: (0, jsx_runtime_1.jsx)("em", { children: "None" }) })), info.choices.map(function (c) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: c }, { children: c }), c)); })] }))] })))
                                                 : null }), i));
-                            }) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, sx: { my: 0.75 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ variant: "outlined", onClick: function () { return setEditing(-1); }, size: "small" }, { children: "Save Contact" })) })), errorMessage &&
+                            }) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, sx: { my: 0.75 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ variant: "outlined", onClick: function () { return setEditing(-1); }, size: "small", disabled: !!errorMessage || !!parentError }, { children: "Save Contact" })) })), errorMessage &&
                     (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ color: "error" }, { children: errorMessage })) }))] })));
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, direction: "column", spacing: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: value.map(function (contact, i) { return ((0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, alignItems: "center", justifyContent: "space-between", wrap: "nowrap", spacing: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(__1.IconButton, __assign({ onClick: function () { return setEditing(i); }, color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ noWrap: true }, { children: (0, utilities_1.user_display_name)(contact) || "Unnamed Contact ".concat(i + 1) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(__1.LabeledIconButton, { Icon: icons_material_1.Delete, label: "Remove", onClick: function () { return onChange(value.filter(function (v, _i) { return i !== _i; }), field.id); } }) }))] })) }), i)); }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ variant: "contained", onClick: handleAddContact }, { children: "Add Contact" })) }))] })));