@tellescope/react-components 1.230.2 → 1.232.0

package/lib/esm/Forms/inputs.v2.d.ts

@@ -20,7 +20,7 @@ export declare const RatingInput: ({ field, value, onChange }: FormInputProps<'r
 export declare const RankingInput: ({ field, value, onChange }: FormInputProps<'ranking'>) => JSX.Element;
 export declare const DateInput: ({ field, value, onChange, placement, ...props }: {
     field: FormField;
-    placement?: "left" | "right" | "bottom" | "top" | undefined;
+    placement?: "bottom" | "left" | "right" | "top" | undefined;
 } & FormInputProps<"date"> & Styled) => JSX.Element;
 export declare const TableInput: ({ field, value, onChange, ...props }: FormInputProps<'Input Table'>) => JSX.Element;
 export declare const AutoFocusTextField: (props: TextFieldProps) => JSX.Element;
@@ -45,9 +45,7 @@ export declare const FilesInput: ({ value, onChange, field, existingFileName, up
     existingFileName?: string | undefined;
 }) => JSX.Element;
 export declare const MultipleChoiceInput: ({ field, form, value: _value, onChange }: FormInputProps<'multiple_choice'>) => JSX.Element;
-export declare const StripeInput: ({ field, value, onChange, setCustomerId, enduserId }: FormInputProps<"Stripe"> & {
-    setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>;
-}) => JSX.Element;
+export { StripeInput } from './inputs';
 export declare const Progress: ({ numerator, denominator, style, color }: {
     numerator: number;
     denominator: number;
@@ -66,7 +64,7 @@ export declare const CanvasMedicationsInput: ({ field, value, onChange }: FormIn
 export declare const MedicationsInput: ({ field, value, onChange, ...props }: FormInputProps<'Medications'>) => JSX.Element;
 export declare const BelugaPatientPreferenceInput: ({ field, value: _value, onChange }: FormInputProps<'Beluga Patient Preference'>) => JSX.Element;
 export declare const contact_is_valid: (e: Partial<Enduser>) => "Email is invalid" | "Phone is invalid" | "Date of birth should be MM-DD-YYYY" | undefined;
-export declare const RelatedContactsInput: ({ field, value: _value, onChange, ...props }: FormInputProps<'Related Contacts'>) => JSX.Element;
+export declare const RelatedContactsInput: ({ field, value: _value, onChange, error: parentError, ...props }: FormInputProps<'Related Contacts'>) => JSX.Element;
 export declare const AppointmentBookingInput: ({ formResponseId, field, value, onChange, form, responses, goToPreviousField, isPreviousDisabled, enduserId, ...props }: FormInputProps<'Appointment Booking'>) => JSX.Element;
 export declare const HeightInput: ({ field, value, onChange, ...props }: FormInputProps<'Height'>) => JSX.Element;
 export declare const include_current_url_parameters_if_templated: (url: string) => string;

package/lib/esm/Forms/inputs.v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.v2.d.ts","sourceRoot":"","sources":["../../../src/Forms/inputs.v2.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"inputs.v2.d.ts","sourceRoot":"","sources":["../../../src/Forms/inputs.v2.tsx"],"names":[],"mappings":"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"}

package/lib/esm/Forms/inputs.v2.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, Grid, IconButton as MuiIconButton, InputLabel, MenuItem, Radio, RadioGroup, Select, TextField, Typography } from "@mui/material";
+import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, Grid, InputLabel, MenuItem, 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, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, 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';
@@ -89,9 +89,7 @@ import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import heic2any from "heic2any";
 import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
 import LanguageIcon from '@mui/icons-material/Language';
-import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
-import { CheckCircleOutline, Delete, Edit, ExpandMore, UploadFile } from "@mui/icons-material";
+import { CheckCircleOutline, Delete, Edit, UploadFile } from "@mui/icons-material";
 import { WYSIWYG } from "./wysiwyg";
 export var LanguageSelect = function (_a) {
     var value = _a.value, props = __rest(_a, ["value"]);
@@ -741,7 +739,6 @@ export var MultipleChoiceInput = function (_a) {
     var field = _a.field, form = _a.form, _value = _a.value, onChange = _a.onChange;
     var value = typeof _value === 'string' ? [_value] : _value; // if loading existingResponses, allows them to be a string
     var _f = field.options, choices = _f.choices, radio = _f.radio, other = _f.other, optionDetails = _f.optionDetails;
-    var _g = useState({}), expandedDescriptions = _g[0], setExpandedDescriptions = _g[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 : '';
@@ -751,19 +748,12 @@ export var MultipleChoiceInput = function (_a) {
         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;
     }, [optionDetails]);
-    var toggleDescription = useCallback(function (index) {
-        setExpandedDescriptions(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[index] = !prev[index], _a)));
-        });
-    }, []);
     return (_jsxs(Grid, __assign({ container: true, alignItems: "center", rowGap: 1.5 }, { children: [radio
                 ? (_jsx(FormControl, __assign({ fullWidth: true }, { children: _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) {
                             var description = getDescriptionForChoice(c);
                             var hasDescription = !!description;
-                            var isExpanded = expandedDescriptions[i];
                             var isSelected = !!(value === null || value === void 0 ? void 0 : value.includes(c)) && c !== otherString;
-                            return (_jsxs(Box, __assign({ sx: { width: '100%' } }, { children: [_jsxs(Box, __assign({ sx: {
+                            return (_jsxs(Box, __assign({ sx: { width: '100%' } }, { children: [_jsx(Box, __assign({ sx: {
                                             display: 'flex',
                                             alignItems: 'center',
                                             width: '100%',
@@ -771,25 +761,17 @@ export var MultipleChoiceInput = function (_a) {
                                             borderColor: 'primary.main',
                                             borderRadius: 1,
                                             padding: '16px 16px',
-                                            marginBottom: '12px',
+                                            marginBottom: hasDescription ? '8px' : '12px',
                                             cursor: 'pointer',
                                             backgroundColor: 'transparent',
                                             boxSizing: 'border-box',
                                             '&:hover': {
                                                 backgroundColor: function (theme) { return "".concat(theme.palette.primary.main, "14"); },
                                             },
-                                        }, onClick: function () { return onChange((value === null || value === void 0 ? void 0 : value.includes(c)) ? [] : [c], field.id); } }, { children: [_jsx(Typography, __assign({ component: "span", sx: { flex: 1, color: 'primary.main', fontSize: 13, fontWeight: 600 } }, { children: c })), hasDescription && (_jsx(MuiIconButton, __assign({ className: "expand-button", size: "small", onClick: function (e) {
-                                                    e.stopPropagation();
-                                                    toggleDescription(i);
-                                                }, sx: {
-                                                    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                                                    transition: 'transform 0.2s',
-                                                    ml: 1
-                                                } }, { children: _jsx(ExpandMore, { fontSize: "small" }) })))] })), hasDescription && (_jsx(Collapse, __assign({ in: isExpanded }, { children: _jsx(Box, __assign({ sx: { pl: 2, pr: 2, pb: 1, pt: 1 } }, { children: _jsx(Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: description })) })) })))] }), i));
+                                        }, onClick: function () { return onChange((value === null || value === void 0 ? void 0 : value.includes(c)) ? [] : [c], field.id); } }, { children: _jsx(Typography, __assign({ component: "span", sx: { flex: 1, color: 'primary.main', fontSize: 13, fontWeight: 600 } }, { children: c })) })), hasDescription && (_jsx(Box, __assign({ sx: { pl: 2, pr: 2, pb: 1, mb: 1 } }, { children: _jsx(Typography, __assign({ style: { fontSize: 14, color: '#00000099' } }, { children: description })) })))] }), i));
                         }) })) }))) : ((choices !== null && choices !== void 0 ? choices : []).map(function (c, i) {
                 var description = getDescriptionForChoice(c);
                 var hasDescription = !!description;
-                var isExpanded = expandedDescriptions[i];
                 return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsxs(Box, __assign({ sx: { width: '100%' } }, { children: [_jsxs(Box, __assign({ sx: {
                                     display: 'flex',
                                     alignItems: 'center',
@@ -798,10 +780,6 @@ export var MultipleChoiceInput = function (_a) {
                                     boxSizing: 'border-box'
                                 }, onClick: function (e) {
                                     var _a, _b, _d, _e;
-                                    // Don't trigger selection if clicking on the expand button
-                                    if (e.target.closest('.expand-button')) {
-                                        return;
-                                    }
                                     onChange(((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)))
                                             ? []
@@ -809,14 +787,7 @@ export var MultipleChoiceInput = function (_a) {
                                         : ((radio || ((_e = (_d = field.options) === null || _d === void 0 ? void 0 : _d.radioChoices) === null || _e === void 0 ? void 0 : _e.includes(c)))
                                             ? [c]
                                             : __spreadArray(__spreadArray([], (value !== null && value !== void 0 ? value : []).filter(function (x) { var _a, _b; return !((_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a.radioChoices) === null || _b === void 0 ? void 0 : _b.includes(x)); }), true), [c], false))), field.id);
-                                } }, { children: [_jsx(Checkbox, { color: "primary", checked: !!(value === null || value === void 0 ? void 0 : value.includes(c)) && c !== otherString, inputProps: { 'aria-label': 'primary checkbox' } }), _jsx(Typography, __assign({ component: "span", sx: { flex: 1 } }, { children: c })), hasDescription && (_jsx(MuiIconButton, __assign({ className: "expand-button", size: "small", onClick: function (e) {
-                                            e.stopPropagation();
-                                            toggleDescription(i);
-                                        }, sx: {
-                                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                                            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));
+                                } }, { children: [_jsx(Checkbox, { color: "primary", checked: !!(value === null || value === void 0 ? void 0 : value.includes(c)) && c !== otherString, inputProps: { 'aria-label': 'primary checkbox' } }), _jsx(Typography, __assign({ component: "span", sx: { flex: 1 } }, { children: c }))] })), hasDescription && (_jsx(Box, __assign({ sx: { pl: '42px', pr: 2, pb: 1 } }, { children: _jsx(Typography, __assign({ style: { fontSize: 14, color: '#00000099' } }, { children: description })) })))] })) }), i));
             })), other &&
                 _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(TextField // className={classes.textField}
                     , { InputProps: { sx: { borderRadius: 2.5 } }, sx: { width: radio ? "calc(100% - 15px)" : '100%' }, size: "small", "aria-label": form_display_text_for_language(form, "Other"), value: otherString, placeholder: form_display_text_for_language(form, "Other"), variant: "outlined", 
@@ -832,211 +803,11 @@ 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);
                         } }) }))] })));
 };
-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 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 fetchRef = useRef(false);
-    useEffect(function () {
-        var _a, _b, _d;
-        if (fetchRef.current)
-            return;
-        if (value && ((_a = session.userInfo) === null || _a === void 0 ? void 0 : _a.stripeCustomerId)) {
-            return setCustomerId(function (c) { var _a; return c ? c : (_a = session.userInfo) === null || _a === void 0 ? void 0 : _a.stripeCustomerId; }); // already paid or saved card
-        }
-        // Check if product selection mode is enabled
-        if (((_b = field.options) === null || _b === void 0 ? void 0 : _b.stripeProductSelectionMode) && (((_d = field.options) === null || _d === void 0 ? void 0 : _d.productIds) || []).length > 1) {
-            setShowProductSelection(true);
-            setLoadingProducts(true);
-            // Fetch product data with real-time Stripe pricing via proxy_read
-            var productIds = (field.options.productIds || []).join(',');
-            session.api.integrations.proxy_read({
-                integration: 'Stripe',
-                type: 'product-prices',
-                id: productIds,
-                query: field.options.stripeKey
-            })
-                .then(function (_a) {
-                var data = _a.data;
-                setAvailableProducts(data.products || []);
-                setLoadingProducts(false);
-            })
-                .catch(function (e) {
-                var _a, _b;
-                console.error('Error loading product data:', e);
-                var errorMessage = ((_b = (_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'Stripe pricing error:'))
-                    ? e.message.replace('Stripe pricing error: ', '')
-                    : 'Failed to load product information from Stripe';
-                setError("Product configuration error: ".concat(errorMessage));
-                setLoadingProducts(false);
-            });
-            return;
-        }
-        fetchRef.current = true;
-        session.api.form_responses.stripe_details({ fieldId: field.id, enduserId: enduserId })
-            .then(function (_a) {
-            var clientSecret = _a.clientSecret, publishableKey = _a.publishableKey, stripeAccount = _a.stripeAccount, businessName = _a.businessName, customerId = _a.customerId, isCheckout = _a.isCheckout, answerText = _a.answerText;
-            setAnswertext(answerText || '');
-            setIsCheckout(!!isCheckout);
-            setClientSecret(clientSecret);
-            setStripePromise(loadStripe(publishableKey, { stripeAccount: stripeAccount }));
-            setBusinessName(businessName);
-            setCustomerId(customerId);
-        })
-            .catch(function (e) {
-            console.error(e);
-            if (typeof (e === null || e === void 0 ? void 0 : e.message) === 'string') {
-                setError(e.message);
-            }
-        });
-    }, [session, value, field.id, enduserId]);
-    var cost = (showProductSelection
-        ? selectedProducts.reduce(function (total, productId) {
-            var _a;
-            var product = availableProducts.find(function (p) { return p._id === productId; });
-            if (product === null || product === void 0 ? void 0 : product.currentPrice) {
-                return total + (product.currentPrice.amount || 0);
-            }
-            return total + (((_a = product === null || product === void 0 ? void 0 : product.cost) === null || _a === void 0 ? void 0 : _a.amount) || 0);
-        }, 0)
-        : 0 // Will be calculated by existing Stripe flow when not in selection mode
-    );
-    // Handle product selection step
-    if (showProductSelection) {
-        if (error) {
-            return (_jsxs(Grid, __assign({ container: true, direction: "column", spacing: 2, alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ color: "error", variant: "h6" }, { children: "Product Configuration Error" })) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ color: "error", sx: { textAlign: 'center' } }, { children: error })) }))] })));
-        }
-        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;
-        var handleProductSelection_1 = function (productId) {
-            if (isSingleSelection_1) {
-                setSelectedProducts([productId]);
-            }
-            else {
-                setSelectedProducts(function (prev) {
-                    return prev.includes(productId)
-                        ? prev.filter(function (id) { return id !== productId; })
-                        : __spreadArray(__spreadArray([], prev, true), [productId], false);
-                });
-            }
-        };
-        var handleContinueToPayment = function () {
-            if (selectedProducts.length === 0)
-                return;
-            setShowProductSelection(false);
-            fetchRef.current = true;
-            // Now fetch Stripe details with selected products
-            session.api.form_responses.stripe_details(__assign({ fieldId: field.id, enduserId: enduserId }, (selectedProducts.length > 0 && { selectedProductIds: selectedProducts }) // Pass selected products to Stripe checkout
-            ))
-                .then(function (_a) {
-                var clientSecret = _a.clientSecret, publishableKey = _a.publishableKey, stripeAccount = _a.stripeAccount, businessName = _a.businessName, customerId = _a.customerId, isCheckout = _a.isCheckout, answerText = _a.answerText;
-                setAnswertext(answerText || '');
-                setIsCheckout(!!isCheckout);
-                setClientSecret(clientSecret);
-                setStripePromise(loadStripe(publishableKey, { stripeAccount: stripeAccount }));
-                setBusinessName(businessName);
-                setCustomerId(customerId);
-            })
-                .catch(function (e) {
-                console.error(e);
-                if (typeof (e === null || e === void 0 ? void 0 : e.message) === 'string') {
-                    setError(e.message);
-                }
-            });
-        };
-        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) {
-                    var _a, _b, _d;
-                    // Use real-time Stripe pricing if available, fallback to Tellescope pricing
-                    var price = product.currentPrice || product.cost;
-                    var priceAmount = (price === null || price === void 0 ? void 0 : price.amount) || 0;
-                    var priceCurrency = (price === null || price === void 0 ? void 0 : price.currency) || 'USD';
-                    return (_jsx(Grid, __assign({ item: true }, { children: _jsx(FormControlLabel, { control: isSingleSelection_1 ? (_jsx(Radio, { checked: selectedProducts.includes(product._id), onChange: function () { return handleProductSelection_1(product._id); } })) : (_jsx(Checkbox, { checked: selectedProducts.includes(product._id), onChange: function () { return handleProductSelection_1(product._id); } })), label: _jsxs(Box, { children: [_jsx(Typography, __assign({ variant: "body1", fontWeight: "bold" }, { children: product.title })), product.description && (_jsx(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: product.description }))), _jsxs(Typography, __assign({ variant: "body2", color: "primary" }, { children: ["$", (priceAmount / 100).toFixed(2), " ", priceCurrency.toUpperCase(), ((_a = product.currentPrice) === null || _a === void 0 ? void 0 : _a.isSubscription) && (_jsx(Typography, __assign({ component: "span", variant: "caption", sx: { ml: 0.5 } }, { children: format_stripe_subscription_interval((_b = product.currentPrice) === null || _b === void 0 ? void 0 : _b.interval, (_d = product.currentPrice) === null || _d === void 0 ? void 0 : _d.interval_count) })))] }))] }) }) }), product._id));
-                }), _jsx(Grid, __assign({ item: true }, { children: _jsx(Button, __assign({ variant: "contained", onClick: handleContinueToPayment, disabled: selectedProducts.length === 0, sx: { mt: 2 } }, { children: "Continue to Payment" })) }))] })));
-    }
-    if (error) {
-        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!" }))] })));
-    }
-    if (!(clientSecret && stripePromise))
-        return _jsx(LinearProgress, {});
-    if (isCheckout && stripePromise)
-        return (_jsx(EmbeddedCheckoutProvider, __assign({ stripe: stripePromise, options: {
-                clientSecret: clientSecret,
-                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(answertext || 'Saved card details', field.id); }, cost: cost, field: field }) })));
-};
-var StripeForm = function (_a) {
-    var _b, _d, _e;
-    var businessName = _a.businessName, onSuccess = _a.onSuccess, field = _a.field, cost = _a.cost;
-    var stripe = useStripe();
-    var elements = useElements();
-    var _f = useState(false), ready = _f[0], setReady = _f[1];
-    var _g = useState(''), errorMessage = _g[0], setErrorMessage = _g[1];
-    var handleSubmit = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var error;
-        var _a, _b;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    // We don't want to let default form submission happen here,
-                    // which would refresh the page.
-                    event === null || event === void 0 ? void 0 : event.preventDefault();
-                    if (!stripe || !elements) {
-                        // Stripe.js hasn't yet loaded.
-                        // Make sure to disable form submission until Stripe.js has loaded.
-                        return [2 /*return*/, null];
-                    }
-                    return [4 /*yield*/, (((_a = field.options) === null || _a === void 0 ? void 0 : _a.chargeImmediately) ? stripe.confirmPayment : stripe.confirmSetup)({
-                            //`Elements` instance that was used to create the Payment Element
-                            elements: elements,
-                            confirmParams: {
-                                return_url: window.location.href,
-                            },
-                            redirect: 'if_required', //  ensures the redirect url won't be used, unless the Bank redirect payment type is enabled (it's not, just card)
-                        })];
-                case 1:
-                    error = (_d.sent()).error;
-                    if (error) {
-                        // This point will only be reached if there is an immediate error when
-                        // confirming the payment. Show error to your customer (for example, payment
-                        // details incomplete)
-                        setErrorMessage((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : '');
-                    }
-                    else {
-                        onSuccess();
-                        // Your customer will be redirected to your `return_url`. For some payment
-                        // methods like iDEAL, your customer will be redirected to an intermediate
-                        // site first to authorize the payment, then redirected to the `return_url`.
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (_jsxs("form", __assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { onReady: function () { return setReady(true); }, options: {
-                    business: { name: businessName },
-                } }), _jsx(Button, __assign({ variant: "contained", color: "primary", type: "submit", sx: { mt: 1 }, disabled: !(stripe && ready) }, { children: ((_b = field.options) === null || _b === void 0 ? void 0 : _b.chargeImmediately) ? 'Make Payment' : 'Save Payment Details' })), cost > 0 &&
-                _jsx(Typography, __assign({ sx: { mt: 0.5 } }, { children: ((_d = field.options) === null || _d === void 0 ? void 0 : _d.customPriceMessage)
-                        ? field.options.customPriceMessage.replaceAll('{{PRICE}}', "$".concat((cost / 100).toFixed(2)))
-                        : "You will be charged $".concat((cost / 100).toFixed(2), " ").concat(((_e = field.options) === null || _e === void 0 ? void 0 : _e.chargeImmediately) ? '' : 'on form submission') })), errorMessage &&
-                _jsx(Typography, __assign({ color: "error", sx: { mt: 0.5 } }, { children: errorMessage }))] })));
-};
+// StripeInput is shared between v1 and v2 forms
+// Both versions use the same implementation from inputs.tsx to ensure consistent behavior
+// and avoid code duplication. Re-exporting here maintains the pattern where forms.v2.tsx
+// only imports from inputs.v2.tsx
+export { StripeInput } from './inputs';
 export var Progress = function (_a) {
     var numerator = _a.numerator, denominator = _a.denominator, style = _a.style, color = _a.color;
     return (_jsx(Box, __assign({ sx: __assign({ display: 'flex', alignItems: 'center' }, style) }, { children: _jsx(Box, __assign({ sx: { width: '100%' } }, { children: _jsx(LinearProgress, { variant: "determinate", value: (numerator / (denominator || 1)) * 100, sx: color ? {
@@ -1690,7 +1461,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];
@@ -1709,7 +1480,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'
@@ -1729,7 +1500,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" })) }))] })));