@tellescope/react-components 1.238.0 → 1.239.1

package/lib/esm/Forms/inputs.js

@@ -93,6 +93,7 @@ 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";
+import { useConditionalChoices } from "./hooks";
 // Bridge Eligibility - shared variable for storing most recent eligibility userIds
 var bridgeEligibilityResult = {
     userIds: [],
@@ -831,6 +832,91 @@ export var BridgeEligibilityInput = function (_a) {
     // User/admin interface (non-enduser sessions)
     return (_jsxs(Grid, __assign({ container: true, spacing: 2, direction: "column" }, { children: [_jsxs(Grid, __assign({ item: true }, { children: [_jsxs(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: ["Eligibility Type: ", eligibilityType] })), _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: ["Service Type IDs: ", ((_e = (_d = field.options) === null || _d === void 0 ? void 0 : _d.bridgeServiceTypeIds) === null || _e === void 0 ? void 0 : _e.join(', ')) || 'Not configured'] })), state && _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: ["State: ", state] })), payerId && _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: ["Payer ID: ", payerId] })), memberId && _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: ["Member ID: ", memberId] }))] })), error && (_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ variant: "body2", color: "error" }, { children: error })) }))), polling && (_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ variant: "body2", color: "primary" }, { children: form_display_text_for_language(form, "Polling for results... (this may take 15-30 seconds)") })) }))), _jsxs(Grid, __assign({ item: true, container: true, spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(LoadingButton, { variant: "outlined", onClick: checkProviderEligibility, submitText: form_display_text_for_language(form, "Check Provider Eligibility (Free)"), submittingText: form_display_text_for_language(form, "Checking..."), submitting: loading && !polling, disabled: !((_g = (_f = field.options) === null || _f === void 0 ? void 0 : _f.bridgeServiceTypeIds) === null || _g === void 0 ? void 0 : _g.length) || loading || polling }) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(LoadingButton, { variant: "outlined", onClick: checkServiceEligibility, submitText: form_display_text_for_language(form, "Check Service Eligibility (Paid)"), submittingText: polling ? form_display_text_for_language(form, "Polling...") : form_display_text_for_language(form, "Initiating..."), submitting: loading || polling, disabled: !((_j = (_h = field.options) === null || _h === void 0 ? void 0 : _h.bridgeServiceTypeIds) === null || _j === void 0 ? void 0 : _j.length) || loading || polling }) }))] })), value && (_jsxs(Grid, __assign({ item: true }, { children: [_jsx(Typography, __assign({ variant: "caption", color: "textSecondary" }, { children: "Current Answer:" })), _jsx("pre", __assign({ style: { fontSize: 11, whiteSpace: 'pre-wrap', wordBreak: 'break-word' } }, { children: JSON.stringify(value, null, 2) }))] })))] })));
 };
+export var PharmacySearchInput = function (_a) {
+    var field = _a.field, rawValue = _a.value, onChange = _a.onChange, responses = _a.responses, enduser = _a.enduser, form = _a.form, props = __rest(_a, ["field", "value", "onChange", "responses", "enduser", "form"]);
+    var value = rawValue;
+    var session = useResolvedSession();
+    // Get initial ZIP code from responses or enduser data
+    var getInitialZipCode = function () {
+        var _a;
+        // Check Address field responses first
+        var addressResponse = responses === null || responses === void 0 ? void 0 : responses.find(function (r) { var _a, _b, _d; return ((_a = r.answer) === null || _a === void 0 ? void 0 : _a.type) === 'Address' && ((_d = (_b = r.answer) === null || _b === void 0 ? void 0 : _b.value) === null || _d === void 0 ? void 0 : _d.zipCode); });
+        if (((_a = addressResponse === null || addressResponse === void 0 ? void 0 : addressResponse.answer) === null || _a === void 0 ? void 0 : _a.type) === 'Address') {
+            var addressValue = addressResponse.answer.value;
+            if (addressValue === null || addressValue === void 0 ? void 0 : addressValue.zipCode) {
+                return addressValue.zipCode;
+            }
+        }
+        // Fall back to enduser.zipCode
+        return (enduser === null || enduser === void 0 ? void 0 : enduser.zipCode) || '';
+    };
+    var _b = useState(getInitialZipCode()), zipCode = _b[0], setZipCode = _b[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _e = useState(), error = _e[0], setError = _e[1];
+    var _f = useState([]), pharmacies = _f[0], setPharmacies = _f[1];
+    var _g = useState(false), hasSearched = _g[0], setHasSearched = _g[1];
+    var searchPharmacies = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, err_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!zipCode || zipCode.length !== 5) {
+                        setError(form_display_text_for_language(form, 'Please enter a valid 5-digit ZIP code'));
+                        return [2 /*return*/];
+                    }
+                    setLoading(true);
+                    setError(undefined);
+                    setHasSearched(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, session.api.integrations.proxy_read({
+                            integration: 'ScriptSure',
+                            type: 'pharmacy-search',
+                            query: JSON.stringify({ zipCode: zipCode }),
+                        })];
+                case 2:
+                    data = (_a.sent()).data;
+                    setPharmacies(data || []);
+                    if (!(data === null || data === void 0 ? void 0 : data.length)) {
+                        setError(form_display_text_for_language(form, 'No pharmacies found for this ZIP code'));
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_6 = _a.sent();
+                    setError((err_6 === null || err_6 === void 0 ? void 0 : err_6.message) || form_display_text_for_language(form, 'Failed to search pharmacies'));
+                    setPharmacies([]);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [session, zipCode, form]);
+    var handleSelectPharmacy = function (pharmacy) {
+        onChange({
+            npi: pharmacy.npi,
+            ncpdpId: pharmacy.ncpdpId,
+            businessName: pharmacy.businessName,
+            primaryTelephone: pharmacy.primaryTelephone || '',
+            addressLine1: pharmacy.addressLine1,
+            city: pharmacy.city,
+            stateProvince: pharmacy.stateProvince,
+            postalCode: pharmacy.postalCode,
+        }, field.id);
+    };
+    var formatPharmacyAddress = function (p) {
+        var parts = [p.addressLine1, p.city, p.stateProvince, p.postalCode].filter(Boolean);
+        return parts.join(', ');
+    };
+    return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsxs(Grid, __assign({ container: true, spacing: 2, alignItems: "flex-end" }, { children: [_jsx(Grid, __assign({ item: true, xs: 8, sm: 6 }, { children: _jsx(TextField, { fullWidth: true, size: "small", label: form_display_text_for_language(form, "ZIP Code"), value: zipCode, onChange: function (e) { return setZipCode(e.target.value.replace(/\D/g, '').slice(0, 5)); }, InputProps: defaultInputProps, placeholder: "12345", required: !field.isOptional }) })), _jsx(Grid, __assign({ item: true, xs: 4, sm: 6 }, { children: _jsx(LoadingButton, { variant: "contained", onClick: searchPharmacies, submitText: form_display_text_for_language(form, "Search"), submittingText: form_display_text_for_language(form, "Searching..."), submitting: loading, disabled: zipCode.length !== 5 || loading, style: { width: '100%', marginTop: 0 } }) }))] })) })), error && (_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ color: "error", sx: { fontSize: 14 } }, { children: error })) }))), value && (_jsx(Grid, __assign({ item: true }, { children: _jsx(Paper, __assign({ elevation: 2, sx: { p: 2, backgroundColor: '#e8f5e9' } }, { children: _jsxs(Grid, __assign({ container: true, alignItems: "center", justifyContent: "space-between" }, { children: [_jsxs(Grid, __assign({ item: true, xs: true }, { children: [_jsxs(Typography, __assign({ variant: "subtitle1", fontWeight: "bold" }, { children: [_jsx(CheckCircleOutline, { sx: { color: 'success.main', mr: 1, verticalAlign: 'middle' } }), value.businessName] })), _jsx(Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: formatPharmacyAddress(value) })), value.primaryTelephone && (_jsx(Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: value.primaryTelephone })))] })), _jsx(Grid, __assign({ item: true }, { children: _jsx(MuiIconButton, __assign({ onClick: function () { return onChange(undefined, field.id); }, size: "small" }, { children: _jsx(CancelIcon, {}) })) }))] })) })) }))), !value && hasSearched && pharmacies.length > 0 && (_jsxs(Grid, __assign({ item: true }, { children: [_jsxs(Typography, __assign({ variant: "subtitle2", sx: { mb: 1 } }, { children: [pharmacies.length, " ", form_display_text_for_language(form, pharmacies.length === 1 ? 'pharmacy found' : 'pharmacies found')] })), _jsx(Box, __assign({ sx: { maxHeight: 300, overflow: 'auto' } }, { children: pharmacies.map(function (pharmacy, index) { return (_jsxs(Paper, __assign({ elevation: 1, sx: {
+                                p: 1.5,
+                                mb: 1,
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#f5f5f5' },
+                            }, onClick: function () { return handleSelectPharmacy(pharmacy); } }, { children: [_jsx(Typography, __assign({ variant: "subtitle2", fontWeight: "medium" }, { children: pharmacy.businessName })), _jsx(Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: formatPharmacyAddress(pharmacy) })), pharmacy.primaryTelephone && (_jsx(Typography, __assign({ variant: "caption", color: "text.secondary" }, { children: pharmacy.primaryTelephone })))] }), "".concat(pharmacy.ncpdpId, "-").concat(index))); }) }))] }))), loading && (_jsx(Grid, __assign({ item: true }, { children: _jsx(LinearProgress, {}) })))] })));
+};
 var HourSelector = function (props) { return (_jsx(StringSelector, __assign({}, props, { options: Array(12).fill('').map(function (_, i) { return (i + 1) <= 9 ? "0".concat(i + 1) : (i + 1).toString(); }) }))); };
 var MinuteSelector = function (props) { return (_jsx(StringSelector, __assign({}, props, { options: Array(60).fill('').map(function (_, i) { return i <= 9 ? "0".concat(i) : i.toString(); }) }))); };
 var AmPmSelector = function (props) { return (_jsx(StringSelector, __assign({}, props, { options: ['AM', 'PM'] }))); };
@@ -1128,13 +1214,24 @@ var multipleChoiceItemSx = {
 };
 export var MultipleChoiceInput = function (_a) {
     var _b;
-    var field = _a.field, form = _a.form, _value = _a.value, onChange = _a.onChange;
+    var field = _a.field, form = _a.form, _value = _a.value, onChange = _a.onChange, responses = _a.responses, enduser = _a.enduser;
     var value = typeof _value === 'string' ? [_value] : _value; // if loading existingResponses, allows them to be a string
     var _d = field.options, choices = _d.choices, radio = _d.radio, other = _d.other, optionDetails = _d.optionDetails;
     var _e = useState({}), expandedDescriptions = _e[0], setExpandedDescriptions = _e[1];
     // current other string
     var enteringOtherStringRef = React.useRef(''); // if typing otherString as prefix of a checkbox value, don't auto-select
     var otherString = (_b = value === null || value === void 0 ? void 0 : value.find(function (v) { var _a; return v === enteringOtherStringRef.current || !((_a = (choices !== null && choices !== void 0 ? choices : [])) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c === v; })); })) !== null && _b !== void 0 ? _b : '';
+    // Conditional visibility for choices
+    var _f = useConditionalChoices({
+        choices: choices,
+        optionDetails: optionDetails,
+        responses: responses,
+        enduser: enduser,
+        form: form,
+        onChange: onChange,
+        fieldId: field.id,
+        otherString: otherString,
+    }), visibleChoices = _f.visibleChoices, handleChange = _f.handleChange;
     var getDescriptionForChoice = useCallback(function (choice) {
         var _a;
         return (_a = optionDetails === null || optionDetails === void 0 ? void 0 : optionDetails.find(function (detail) { return detail.option === choice; })) === null || _a === void 0 ? void 0 : _a.description;
@@ -1146,11 +1243,11 @@ export var MultipleChoiceInput = function (_a) {
         });
     }, []);
     return (_jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [radio
-                ? (_jsxs(FormControl, __assign({ fullWidth: true }, { children: [_jsx(FormLabel, __assign({ id: "radio-group-".concat(field.id, "-label") }, { children: form_display_text_for_language(form, "Select One") })), _jsx(RadioGroup, __assign({ "aria-labelledby": "radio-group-".concat(field.id, "-label"), defaultValue: "female", name: "radio-group-".concat(field.id) }, { children: (choices !== null && choices !== void 0 ? choices : []).map(function (c, i) {
+                ? (_jsxs(FormControl, __assign({ fullWidth: true }, { children: [_jsx(FormLabel, __assign({ id: "radio-group-".concat(field.id, "-label") }, { children: form_display_text_for_language(form, "Select One") })), _jsx(RadioGroup, __assign({ "aria-labelledby": "radio-group-".concat(field.id, "-label"), defaultValue: "female", name: "radio-group-".concat(field.id) }, { children: visibleChoices.map(function (c, i) {
                                 var description = getDescriptionForChoice(c);
                                 var hasDescription = !!description;
                                 var isExpanded = expandedDescriptions[i];
-                                return (_jsxs(Box, __assign({ sx: { width: '100%' } }, { children: [_jsx(Box, __assign({ sx: { display: 'flex', alignItems: 'center', width: '100%' } }, { children: _jsx(FormControlLabel, { sx: __assign(__assign({}, multipleChoiceItemSx), { flex: 1, marginLeft: '0px' }), checked: !!(value === null || value === void 0 ? void 0 : value.includes(c)) && c !== otherString, control: _jsx(Radio, { onClick: function () { return onChange((value === null || value === void 0 ? void 0 : value.includes(c)) ? [] : [c], field.id); } }), label: _jsxs(Box, __assign({ sx: { display: 'flex', alignItems: 'center', width: '100%' } }, { children: [_jsx(Typography, __assign({ component: "span", sx: { flex: 1 } }, { children: c })), hasDescription && (_jsx(MuiIconButton, __assign({ size: "small", onClick: function (e) {
+                                return (_jsxs(Box, __assign({ sx: { width: '100%' } }, { children: [_jsx(Box, __assign({ sx: { display: 'flex', alignItems: 'center', width: '100%' } }, { children: _jsx(FormControlLabel, { sx: __assign(__assign({}, multipleChoiceItemSx), { flex: 1, marginLeft: '0px' }), checked: !!(value === null || value === void 0 ? void 0 : value.includes(c)) && c !== otherString, control: _jsx(Radio, { onClick: function () { return handleChange((value === null || value === void 0 ? void 0 : value.includes(c)) ? [] : [c], field.id); } }), label: _jsxs(Box, __assign({ sx: { display: 'flex', alignItems: 'center', width: '100%' } }, { children: [_jsx(Typography, __assign({ component: "span", sx: { flex: 1 } }, { children: c })), hasDescription && (_jsx(MuiIconButton, __assign({ size: "small", onClick: function (e) {
                                                                 e.stopPropagation();
                                                                 toggleDescription(i);
                                                             }, sx: {
@@ -1158,7 +1255,7 @@ export var MultipleChoiceInput = function (_a) {
                                                                 transition: 'transform 0.2s',
                                                                 ml: 1
                                                             } }, { children: _jsx(ExpandMore, { fontSize: "small" }) })))] })) }) })), hasDescription && (_jsx(Collapse, __assign({ in: isExpanded }, { children: _jsx(Box, __assign({ sx: { pl: '42px', pr: 2, pb: 1 } }, { children: _jsx(Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: description })) })) })))] }), i));
-                            }) }))] }))) : ((choices !== null && choices !== void 0 ? choices : []).map(function (c, i) {
+                            }) }))] }))) : (visibleChoices.map(function (c, i) {
                 var description = getDescriptionForChoice(c);
                 var hasDescription = !!description;
                 var isExpanded = expandedDescriptions[i];
@@ -1168,7 +1265,7 @@ export var MultipleChoiceInput = function (_a) {
                                     if (e.target.closest('.expand-button')) {
                                         return;
                                     }
-                                    onChange(((value === null || value === void 0 ? void 0 : value.includes(c))
+                                    handleChange(((value === null || value === void 0 ? void 0 : value.includes(c))
                                         ? ((radio || ((_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a.radioChoices) === null || _b === void 0 ? void 0 : _b.includes(c)))
                                             ? []
                                             : value.filter(function (v) { return v !== c; }))
@@ -1189,13 +1286,13 @@ export var MultipleChoiceInput = function (_a) {
                         // onClick={() => !otherChecked && handleOtherChecked()} // allow click to enable when disabled
                         onChange: function (e) {
                             enteringOtherStringRef.current = e.target.value;
-                            onChange((radio
+                            handleChange((radio
                                 ? (e.target.value.trim()
                                     ? [e.target.value]
                                     : [])
                                 : (e.target.value.trim()
                                     // remove existing other string (if exists) and append new one
-                                    ? __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);
+                                    ? __spreadArray(__spreadArray([], (value !== null && value !== void 0 ? value : []).filter(function (v) { return v !== otherString; }), true), [e.target.value], false) : (value !== null && value !== void 0 ? value : []).filter(function (v) { return v !== otherString; }))), field.id);
                         } }) }))] })));
 };
 // Helper to emit GTM purchase event for Stripe payments (single source of truth)
@@ -2232,7 +2329,7 @@ export var AppointmentBookingInput = function (_a) {
     var _s = useState(false), confirming = _s[0], setConfirming = _s[1];
     var bookingPageId = (_b = field === null || field === void 0 ? void 0 : field.options) === null || _b === void 0 ? void 0 : _b.bookingPageId;
     var downloadICS = useCallback(function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, err_6;
+        var _a, err_7;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -2244,8 +2341,8 @@ export var AppointmentBookingInput = function (_a) {
                         { name: "event.ics", dataIsURL: true, type: 'text/calendar' }]);
                     return [3 /*break*/, 3];
                 case 2:
-                    err_6 = _b.sent();
-                    console.error(err_6);
+                    err_7 = _b.sent();
+                    console.error(err_7);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }