@tellescope/react-components 1.153.1 → 1.154.0

package/lib/esm/Forms/inputs.js

@@ -72,7 +72,7 @@ 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, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, TextField, Typography } from "@mui/material";
+import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, Grid, 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, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities";
@@ -624,6 +624,7 @@ export var StripeInput = function (_a) {
     var _g = useState(false), isCheckout = _g[0], setIsCheckout = _g[1];
     var _h = useState(), stripePromise = _h[0], setStripePromise = _h[1];
     var _j = useProducts({ dontFetch: true }), findProduct = _j[1].findById;
+    var _k = useState(''), answertext = _k[0], setAnswertext = _k[1];
     var fetchRef = useRef(false);
     useEffect(function () {
         var _a;
@@ -635,12 +636,13 @@ export var StripeInput = function (_a) {
         fetchRef.current = true;
         session.api.form_responses.stripe_details({ fieldId: field.id })
             .then(function (_a) {
-            var clientSecret = _a.clientSecret, publishableKey = _a.publishableKey, stripeAccount = _a.stripeAccount, businessName = _a.businessName, customerId = _a.customerId, isCheckout = _a.isCheckout;
+            var clientSecret = _a.clientSecret, publishableKey = _a.publishableKey, stripeAccount = _a.stripeAccount, businessName = _a.businessName, customerId = _a.customerId, isCheckout = _a.isCheckout, answerText = _a.answerText;
             setIsCheckout(!!isCheckout);
             setClientSecret(clientSecret);
             setStripePromise(loadStripe(publishableKey, { stripeAccount: stripeAccount }));
             setBusinessName(businessName);
             setCustomerId(customerId);
+            setAnswertext(answerText || '');
         })
             .catch(console.error);
     }, [session, value, field.id]);
@@ -654,11 +656,11 @@ export var StripeInput = function (_a) {
     if (isCheckout && stripePromise)
         return (_jsx(EmbeddedCheckoutProvider, __assign({ stripe: stripePromise, options: {
                 clientSecret: clientSecret,
-                onComplete: function () { return onChange('Completed checkout', field.id); },
+                onComplete: function () { return onChange(answertext || 'Completed checkout', field.id); },
             } }, { children: _jsx(EmbeddedCheckout, {}) })));
     return (_jsx(Elements, __assign({ stripe: stripePromise, options: {
             clientSecret: clientSecret,
-        } }, { children: _jsx(StripeForm, { businessName: businessName, onSuccess: function () { return onChange('Saved card details', field.id); }, cost: cost, field: field }) })));
+        } }, { children: _jsx(StripeForm, { businessName: businessName, onSuccess: function () { return onChange(answertext || 'Saved card details', field.id); }, cost: cost, field: field }) })));
 };
 var StripeForm = function (_a) {
     var _b, _d, _e;
@@ -904,7 +906,7 @@ export var DatabaseSelectInput = function (_a) {
     }, [field, filteredChoicesWithPotentialDuplicates]);
     if (!doneLoading)
         return _jsx(LinearProgress, {});
-    return (_jsx(Autocomplete, { id: field.id, freeSolo: false, options: filteredChoices, multiple: true, getOptionLabel: function (o) { return (Array.isArray(o) // edge case
+    return (_jsx(Autocomplete, { id: field.id, freeSolo: false, componentsProps: { popper: { sx: { wordBreak: "break-word" } } }, options: filteredChoices, multiple: true, getOptionLabel: function (o) { return (Array.isArray(o) // edge case
             ? ''
             : label_for_database_record(field, o)); }, value: value, onChange: function (_, v) {
             var _a, _b, _d, _e;
@@ -925,7 +927,11 @@ export var DatabaseSelectInput = function (_a) {
                         recordId: (_e = (_d = v[v.length - 1]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : '',
                         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: defaultInputProps.sx }) })); }, 
+        // 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 } }))); });
+        } }));
 };
 var displayTermsCache = undefined;
 var DRUGS_FOR_DISPLAY_TERM = {};
@@ -1529,10 +1535,16 @@ export var EmotiiInput = function (_a) {
     return (_jsx("iframe", { src: data.surveyUrl, style: { border: 'none', height: 650, width: '100%' }, onLoad: function () { return setLoadCount(function (l) { return l + 1; }); } }));
 };
 export var AllergiesInput = function (_a) {
+    var _b;
     var goToNextField = _a.goToNextField, goToPreviousField = _a.goToPreviousField, field = _a.field, value = _a.value, onChange = _a.onChange, form = _a.form, formResponseId = _a.formResponseId, props = __rest(_a, ["goToNextField", "goToPreviousField", "field", "value", "onChange", "form", "formResponseId"]);
     var session = useResolvedSession();
-    var _b = useState(''), query = _b[0], setQuery = _b[1];
-    var _d = useState([]), results = _d[0], setResults = _d[1];
+    var _d = useState(''), query = _d[0], setQuery = _d[1];
+    var _e = useState([]), results = _e[0], setResults = _e[1];
+    // if two allergy questions shown in a row, reset state
+    useEffect(function () {
+        setQuery('');
+        setResults([]);
+    }, [field.id]);
     var fetchRef = useRef(query);
     useEffect(function () {
         if (fetchRef.current === query)
@@ -1541,34 +1553,62 @@ export var AllergiesInput = function (_a) {
         if (!query)
             return;
         var t = setTimeout(function () {
-            session.api.integrations
-                .proxy_read({
-                integration: CANVAS_TITLE,
-                type: 'allergies',
-                query: query,
-            })
-                .then(function (r) {
-                var deduped = [];
-                var totalResults = ((r.data.entry || [])
-                    .flatMap(function (v) { var _a, _b; return ((_b = (_a = v === null || v === void 0 ? void 0 : v.resource) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.coding) || []; })
-                    .filter(function (v) { return v.system.includes('fdbhealth'); })
-                    .map(function (v) { return ({ code: v.code, display: v.display, system: v.system }); }));
-                var _loop_2 = function (v) {
-                    if (deduped.find(function (d) { return d.display === v.display; })) {
-                        return "continue";
+            var _a;
+            if (((_a = field.options) === null || _a === void 0 ? void 0 : _a.dataSource) === CANVAS_TITLE) {
+                session.api.integrations
+                    .proxy_read({
+                    integration: CANVAS_TITLE,
+                    type: 'allergies',
+                    query: query,
+                })
+                    .then(function (r) {
+                    var deduped = [];
+                    var totalResults = ((r.data.entry || [])
+                        .flatMap(function (v) { var _a, _b; return ((_b = (_a = v === null || v === void 0 ? void 0 : v.resource) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.coding) || []; })
+                        .filter(function (v) { return v.system.includes('fdbhealth'); })
+                        .map(function (v) { return ({ code: v.code, display: v.display, system: v.system }); }));
+                    var _loop_2 = function (v) {
+                        if (deduped.find(function (d) { return d.display === v.display; })) {
+                            return "continue";
+                        }
+                        deduped.push(v);
+                    };
+                    for (var _a = 0, totalResults_1 = totalResults; _a < totalResults_1.length; _a++) {
+                        var v = totalResults_1[_a];
+                        _loop_2(v);
                     }
-                    deduped.push(v);
-                };
-                for (var _a = 0, totalResults_1 = totalResults; _a < totalResults_1.length; _a++) {
-                    var v = totalResults_1[_a];
-                    _loop_2(v);
-                }
-                setResults(deduped);
-            });
+                    setResults(deduped);
+                });
+            }
+            else {
+                session.api.allergy_codes.getSome({ search: { query: query } })
+                    .then(function (results) {
+                    var deduped = [];
+                    var _loop_3 = function (v) {
+                        if (deduped.find(function (d) { return d.display === v.display; })) {
+                            return "continue";
+                        }
+                        deduped.push(v);
+                    };
+                    for (var _a = 0, results_1 = results; _a < results_1.length; _a++) {
+                        var v = results_1[_a];
+                        _loop_3(v);
+                    }
+                    setResults(deduped);
+                });
+            }
         }, 200);
         return function () { clearTimeout(t); };
-    }, [session, query]);
-    return (_jsx(Autocomplete, { multiple: true, value: value || [], options: __spreadArray(__spreadArray([], results, true), (value || []), true), style: { marginTop: 5 }, noOptionsText: query.length ? 'No results found' : 'Type to start search', onChange: function (e, v) { return v && onChange(v, field.id); }, getOptionLabel: function (v) { return first_letter_capitalized(v.display); }, filterOptions: function (o) { return o; }, inputValue: query, onInputChange: function (e, v) { return e && setQuery(v); }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: defaultInputProps.sx }), required: !field.isOptional, size: "small", label: "", placeholder: "Search allergies..." }))); } }));
+    }, [session, query, (_b = field === null || field === void 0 ? void 0 : field.options) === null || _b === void 0 ? void 0 : _b.dataSource]);
+    return (_jsx(Autocomplete, { multiple: true, value: value || [], options: results, style: { marginTop: 5 }, noOptionsText: query.length ? 'No results found' : 'Type to start search', onChange: function (e, v) {
+            if (!v) {
+                return;
+            }
+            onChange(v, field.id);
+            setResults([]);
+        }, getOptionLabel: function (v) { return first_letter_capitalized(v.display); }, filterOptions: function (o) { return o; }, inputValue: query, onInputChange: function (e, v) { return e && setQuery(v); }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: defaultInputProps.sx }), required: !field.isOptional, size: "small", label: "", placeholder: "Search allergies..." }))); }, renderTags: function (value, getTagProps) {
+            return value.map(function (value, index) { return (_jsx(Chip, __assign({ label: _jsx(Typography, __assign({ style: { whiteSpace: 'normal' } }, { children: value.display })) }, getTagProps({ index: index }), { sx: { height: "100%", py: 0.5 } }))); });
+        } }));
 };
 export var ConditionsInput = function (_a) {
     var goToNextField = _a.goToNextField, goToPreviousField = _a.goToPreviousField, field = _a.field, value = _a.value, onChange = _a.onChange, form = _a.form, formResponseId = _a.formResponseId, props = __rest(_a, ["goToNextField", "goToPreviousField", "field", "value", "onChange", "form", "formResponseId"]);
@@ -1586,7 +1626,7 @@ export var ConditionsInput = function (_a) {
             session.api.diagnosis_codes.getSome({ search: { query: query } })
                 .then(function (codes) {
                 var deduped = [];
-                var _loop_3 = function (v) {
+                var _loop_4 = function (v) {
                     if (deduped.find(function (d) { return d.display === v.display; })) {
                         return "continue";
                     }
@@ -1594,14 +1634,22 @@ export var ConditionsInput = function (_a) {
                 };
                 for (var _a = 0, codes_1 = codes; _a < codes_1.length; _a++) {
                     var v = codes_1[_a];
-                    _loop_3(v);
+                    _loop_4(v);
                 }
                 setResults(deduped);
             });
         }, 200);
         return function () { clearTimeout(t); };
     }, [session, query]);
-    return (_jsx(Autocomplete, { multiple: true, value: value || [], options: __spreadArray(__spreadArray([], results, true), (value || []), true), style: { marginTop: 5 }, noOptionsText: query.length ? 'No results found' : 'Type to start search', onChange: function (e, v) { return v && onChange(v, field.id); }, getOptionLabel: function (v) { return first_letter_capitalized(v.display); }, filterOptions: function (o) { return o; }, inputValue: query, onInputChange: function (e, v) { return e && setQuery(v); }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: defaultInputProps.sx }), required: !field.isOptional, size: "small", label: "", placeholder: "Search conditions..." }))); } }));
+    return (_jsx(Autocomplete, { multiple: true, value: value || [], options: results, style: { marginTop: 5 }, noOptionsText: query.length ? 'No results found' : 'Type to start search', onChange: function (e, v) {
+            if (!v) {
+                return;
+            }
+            onChange(v, field.id);
+            setResults([]);
+        }, getOptionLabel: function (v) { return first_letter_capitalized(v.display); }, filterOptions: function (o) { return o; }, inputValue: query, onInputChange: function (e, v) { return e && setQuery(v); }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, { InputProps: __assign(__assign({}, params.InputProps), { sx: defaultInputProps.sx }), required: !field.isOptional, size: "small", label: "", placeholder: "Search conditions..." }))); }, renderTags: function (value, getTagProps) {
+            return value.map(function (value, index) { return (_jsx(Chip, __assign({ label: _jsx(Typography, __assign({ style: { whiteSpace: 'normal' } }, { children: value.display })) }, getTagProps({ index: index }), { sx: { height: "100%", py: 0.5 } }))); });
+        } }));
 };
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=inputs.js.map