@teamvortexsoftware/vortex-react-native 1.0.0 → 1.0.1

package/dist/components/VrtxIncomingInvitations.js

@@ -0,0 +1,657 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VrtxIncomingInvitations = VrtxIncomingInvitations;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const analytics_client_1 = require("@teamvortexsoftware/analytics-client");
+const VortexClient_1 = require("../VortexClient");
+const VortexModulesContext_1 = require("../context/VortexModulesContext");
+const isWeb = react_native_1.Platform.OS === 'web';
+// Parse CSS linear-gradient to extract first color for fallback on native
+function parseGradientFirstColor(gradientString) {
+    if (!gradientString || !gradientString.includes('linear-gradient')) {
+        return null;
+    }
+    const stopsRegex = /(rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-z]+)\s+(\d+)%/i;
+    const match = stopsRegex.exec(gradientString);
+    if (match) {
+        return match[1].trim();
+    }
+    return null;
+}
+function ButtonWrapper({ children, style, gradientString, onPress, disabled, }) {
+    const { gradientModule, loaders } = (0, VortexModulesContext_1.useVortexModules)();
+    const styleArray = Array.isArray(style) ? style : [style];
+    // On web, use CSS gradients directly
+    if (gradientString && isWeb) {
+        return (<react_native_1.TouchableOpacity style={[...styleArray, { background: gradientString }]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+        {children}
+      </react_native_1.TouchableOpacity>);
+    }
+    // On native, try to use gradient library if specified
+    if (gradientString && gradientModule && loaders) {
+        const GradientComponent = loaders.loadGradientComponent(gradientModule);
+        const parsed = loaders.parseCSSLinearGradient(gradientString);
+        if (GradientComponent && parsed) {
+            const points = loaders.angleToGradientPoints(parsed.angle);
+            return (<react_native_1.TouchableOpacity onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+          <GradientComponent colors={parsed.colors} locations={parsed.locations} start={points.start} end={points.end} style={styleArray}>
+            {children}
+          </GradientComponent>
+        </react_native_1.TouchableOpacity>);
+        }
+    }
+    // Fallback: solid color from first gradient stop
+    const fallbackColor = gradientString && loaders ? loaders.parseGradientFirstColor(gradientString) : null;
+    const finalStyle = fallbackColor ? [...styleArray, { backgroundColor: fallbackColor }] : styleArray;
+    return (<react_native_1.TouchableOpacity style={finalStyle} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {children}
+    </react_native_1.TouchableOpacity>);
+}
+// Animated item wrapper for fade-out effect
+function AnimatedInvitationItem({ item, renderContent, onRemove, }) {
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const heightAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const animateOut = (0, react_1.useCallback)(() => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(heightAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            onRemove(item.id);
+        });
+    }, [fadeAnim, heightAnim, item.id, onRemove]);
+    return (<react_native_1.Animated.View style={{
+            opacity: fadeAnim,
+            transform: [{ scaleY: heightAnim }],
+        }}>
+      {renderContent(Object.assign(Object.assign({}, item), { metadata: Object.assign(Object.assign({}, item.metadata), { animateOut }) }))}
+    </react_native_1.Animated.View>);
+}
+function VrtxIncomingInvitations({ block, incomingInvitationsConfig, apiUrl, jwt, triggerHaptic, theme, onAnalyticsEvent, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    // Local state for managing the displayed invitations (for animate-out)
+    const [displayedInvitations, setDisplayedInvitations] = (0, react_1.useState)((incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.invitations) || []);
+    const [actionInProgress, setActionInProgress] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    // Fetch invitations from API in the background.
+    // Note: This component may remount multiple times due to parent re-renders
+    // (EditableWrapper is defined inside InviteFormCore's render body).
+    // To avoid flashing a loading spinner on each remount, we show config
+    // invitations immediately and only show loading if there are none.
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!apiUrl || !jwt)
+            return;
+        let cancelled = false;
+        const hasConfigInvitations = ((_b = (_a = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.invitations) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        // Only show loading spinner if we have NO config invitations to display
+        if (!hasConfigInvitations) {
+            setIsLoading(true);
+        }
+        const loadInvitations = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const client = new VortexClient_1.VortexClient({ jwt, baseURL: apiUrl });
+                const apiInvitations = yield client.getIncomingInvitations();
+                // Filter out already accepted invitations (client-side filter)
+                const pendingInvitations = apiInvitations.filter((inv) => {
+                    var _a, _b;
+                    const status = (_b = (_a = inv.status) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+                    return status !== 'accepted' && status !== 'accepted_elsewhere';
+                });
+                // Map API invitations to InvitationItem format
+                const mappedInvitations = pendingInvitations.map((inv) => ({
+                    id: inv.id,
+                    name: inv.creatorName || inv.senderIdentifier || 'Unknown',
+                    userId: inv.foreignCreatorId || undefined,
+                    avatarUrl: inv.creatorAvatarUrl || inv.avatarUrl,
+                    isVortexInvitation: true,
+                    metadata: inv.metadata || undefined,
+                }));
+                if (!cancelled) {
+                    // Merge config invitations with API invitations, deduplicating by userId.
+                    const configInvitations = (incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.invitations) || [];
+                    const apiUserIds = new Set(mappedInvitations
+                        .filter((inv) => inv.userId)
+                        .map((inv) => inv.userId));
+                    const dedupedConfig = configInvitations.filter((inv) => !inv.userId || !apiUserIds.has(inv.userId));
+                    setDisplayedInvitations([...dedupedConfig, ...mappedInvitations]);
+                }
+            }
+            catch (error) {
+                // Silently fail - just show config invitations
+                if (__DEV__) {
+                    console.warn('[VrtxIncomingInvitations] Failed to fetch incoming invitations:', error);
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        });
+        loadInvitations();
+        return () => { cancelled = true; };
+    }, [apiUrl, jwt, incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.invitations]);
+    // Extract customization from block settings or config props, with defaults
+    const blockCustomizations = (_a = block === null || block === void 0 ? void 0 : block.settings) === null || _a === void 0 ? void 0 : _a.customizations;
+    const acceptButtonText = (_d = (_c = (_b = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.acceptButton) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.acceptButtonText) !== null && _d !== void 0 ? _d : 'Accept';
+    const deleteButtonText = (_g = (_f = (_e = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.deleteButton) === null || _e === void 0 ? void 0 : _e.textContent) !== null && _f !== void 0 ? _f : incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.deleteButtonText) !== null && _g !== void 0 ? _g : 'Delete';
+    const emptyStateMessage = (_k = (_j = (_h = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.emptyStateMessage) === null || _h === void 0 ? void 0 : _h.textContent) !== null && _j !== void 0 ? _j : incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.emptyStateMessage) !== null && _k !== void 0 ? _k : 'No incoming invitations';
+    // Confirmation dialog texts
+    const acceptConfirmTitle = (_l = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.acceptConfirmTitle) !== null && _l !== void 0 ? _l : 'Accept Invitation';
+    const acceptConfirmMessage = (_m = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.acceptConfirmMessage) !== null && _m !== void 0 ? _m : 'Accept invitation from {name}?';
+    const deleteConfirmTitle = (_o = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.deleteConfirmTitle) !== null && _o !== void 0 ? _o : 'Delete Invitation';
+    const deleteConfirmMessage = (_p = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.deleteConfirmMessage) !== null && _p !== void 0 ? _p : 'Delete invitation from {name}?';
+    const confirmButtonText = (_q = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.confirmButtonText) !== null && _q !== void 0 ? _q : 'Confirm';
+    const cancelButtonText = (_r = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.cancelButtonText) !== null && _r !== void 0 ? _r : 'Cancel';
+    // Helper to get theme option value from block.theme.options
+    const getBlockThemeValue = (key) => {
+        var _a;
+        const options = (_a = block === null || block === void 0 ? void 0 : block.theme) === null || _a === void 0 ? void 0 : _a.options;
+        if (!options || !Array.isArray(options))
+            return undefined;
+        const option = options.find((opt) => opt.key === key);
+        return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+    };
+    // Theme colors with defaults
+    const colors = {
+        primaryBackground: (_s = theme === null || theme === void 0 ? void 0 : theme.primaryBackground) !== null && _s !== void 0 ? _s : '#6291d5',
+        primaryForeground: (_t = theme === null || theme === void 0 ? void 0 : theme.primaryForeground) !== null && _t !== void 0 ? _t : '#ffffff',
+        secondaryBackground: (_u = theme === null || theme === void 0 ? void 0 : theme.secondaryBackground) !== null && _u !== void 0 ? _u : '#ffffff',
+        secondaryForeground: (_v = theme === null || theme === void 0 ? void 0 : theme.secondaryForeground) !== null && _v !== void 0 ? _v : '#353e5c',
+        foreground: (_w = theme === null || theme === void 0 ? void 0 : theme.foreground) !== null && _w !== void 0 ? _w : '#334153',
+        border: (_x = theme === null || theme === void 0 ? void 0 : theme.border) !== null && _x !== void 0 ? _x : '#cccccc',
+    };
+    // Button styles from block.theme.options (microTheme)
+    const acceptButtonStyles = {
+        background: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-background') ||
+            colors.primaryBackground,
+        color: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-color') ||
+            colors.primaryForeground,
+        borderRadius: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-border-radius'),
+        border: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-border'),
+        padding: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-padding'),
+        fontSize: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-incoming-invitations-accept-button-font-weight'),
+    };
+    const deleteButtonStyles = {
+        background: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-background') ||
+            colors.secondaryBackground,
+        color: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-color') ||
+            colors.secondaryForeground,
+        borderRadius: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-border-radius'),
+        border: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-border'),
+        padding: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-padding'),
+        fontSize: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-incoming-invitations-delete-button-font-weight'),
+    };
+    // Avatar/initials styles from block.theme.options (microTheme)
+    const avatarStyles = {
+        background: getBlockThemeValue('--vrtx-incoming-invitations-avatar-background') ||
+            colors.primaryBackground,
+        color: getBlockThemeValue('--vrtx-incoming-invitations-avatar-color') || colors.primaryForeground,
+    };
+    // Contact name styles from block.theme.options (microTheme)
+    const nameStyles = {
+        color: getBlockThemeValue('--vrtx-incoming-invitations-name-color') || colors.foreground,
+        fontFamily: getBlockThemeValue('--vrtx-incoming-invitations-name-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-incoming-invitations-name-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-incoming-invitations-name-font-weight'),
+    };
+    // Subtitle styles from block.theme.options (microTheme)
+    const subtitleStyles = {
+        color: getBlockThemeValue('--vrtx-incoming-invitations-subtitle-color') ||
+            colors.secondaryForeground,
+        fontFamily: getBlockThemeValue('--vrtx-incoming-invitations-subtitle-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-incoming-invitations-subtitle-font-size'),
+    };
+    // Title styles from block.theme.options (microTheme)
+    const titleStyles = {
+        color: getBlockThemeValue('--vrtx-incoming-invitations-title-color') || colors.foreground,
+        fontFamily: getBlockThemeValue('--vrtx-incoming-invitations-title-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-incoming-invitations-title-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-incoming-invitations-title-font-weight'),
+    };
+    // Remove invitation from displayed list (after animation)
+    const handleRemoveFromDisplay = (0, react_1.useCallback)((id) => {
+        setDisplayedInvitations((prev) => prev.filter((inv) => inv.id !== id));
+    }, []);
+    // Show confirmation dialog
+    const showConfirmation = (0, react_1.useCallback)((title, message, onConfirm) => {
+        if (isWeb) {
+            // Web: use window.confirm
+            const confirmed = window.confirm(message);
+            if (confirmed) {
+                onConfirm();
+            }
+        }
+        else {
+            // Native: use Alert
+            react_native_1.Alert.alert(title, message, [
+                {
+                    text: cancelButtonText,
+                    style: 'cancel',
+                },
+                {
+                    text: confirmButtonText,
+                    onPress: onConfirm,
+                },
+            ]);
+        }
+    }, [confirmButtonText, cancelButtonText]);
+    // Handle Accept button press
+    const handleAccept = (0, react_1.useCallback)((invitation, animateOut) => __awaiter(this, void 0, void 0, function* () {
+        const message = acceptConfirmMessage.replace('{name}', invitation.name);
+        showConfirmation(acceptConfirmTitle, message, () => __awaiter(this, void 0, void 0, function* () {
+            setActionInProgress(invitation.id);
+            yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+            // Emit analytics event for accept button click
+            onAnalyticsEvent === null || onAnalyticsEvent === void 0 ? void 0 : onAnalyticsEvent({
+                name: analytics_client_1.EventNames.INBOUND_INVITATION_ACCEPT_CLICKED,
+                payload: { invitationId: invitation.id, inviterName: invitation.name },
+            });
+            try {
+                // Call the callback if provided and check return value
+                let shouldProceed = true;
+                if (incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.onAccept) {
+                    const result = yield incomingInvitationsConfig.onAccept(invitation);
+                    // If callback returns false explicitly, don't proceed
+                    if (result === false) {
+                        shouldProceed = false;
+                    }
+                }
+                if (!shouldProceed) {
+                    setActionInProgress(null);
+                    return;
+                }
+                // Only call Vortex API for Vortex invitations
+                if (invitation.isVortexInvitation && apiUrl && jwt) {
+                    const client = new VortexClient_1.VortexClient({ jwt, baseURL: apiUrl });
+                    const result = yield client.acceptIncomingInvitation(invitation.id);
+                    if (!result.success) {
+                        console.error('[VrtxIncomingInvitations] API accept failed:', result.message);
+                        throw new Error(result.message || 'Failed to accept invitation');
+                    }
+                }
+                // Animate out after successful action
+                if (animateOut) {
+                    animateOut();
+                }
+                else {
+                    handleRemoveFromDisplay(invitation.id);
+                }
+            }
+            catch (err) {
+                console.error('[VrtxIncomingInvitations] Accept failed:', err);
+            }
+            finally {
+                setActionInProgress(null);
+            }
+        }));
+    }), [
+        incomingInvitationsConfig,
+        apiUrl,
+        jwt,
+        triggerHaptic,
+        acceptConfirmTitle,
+        acceptConfirmMessage,
+        showConfirmation,
+        handleRemoveFromDisplay,
+        onAnalyticsEvent,
+    ]);
+    // Handle Delete button press
+    const handleDelete = (0, react_1.useCallback)((invitation, animateOut) => __awaiter(this, void 0, void 0, function* () {
+        const message = deleteConfirmMessage.replace('{name}', invitation.name);
+        showConfirmation(deleteConfirmTitle, message, () => __awaiter(this, void 0, void 0, function* () {
+            setActionInProgress(invitation.id);
+            yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+            // Emit analytics event for delete button click
+            onAnalyticsEvent === null || onAnalyticsEvent === void 0 ? void 0 : onAnalyticsEvent({
+                name: analytics_client_1.EventNames.INBOUND_INVITATION_DELETE_CLICKED,
+                payload: { invitationId: invitation.id, inviterName: invitation.name },
+            });
+            try {
+                // Call the callback if provided and check return value
+                let shouldProceed = true;
+                if (incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.onDelete) {
+                    const result = yield incomingInvitationsConfig.onDelete(invitation);
+                    // If callback returns false explicitly, don't proceed
+                    if (result === false) {
+                        shouldProceed = false;
+                    }
+                }
+                if (!shouldProceed) {
+                    setActionInProgress(null);
+                    return;
+                }
+                // Only call Vortex API for Vortex invitations
+                if (invitation.isVortexInvitation && apiUrl && jwt) {
+                    const client = new VortexClient_1.VortexClient({ jwt, baseURL: apiUrl });
+                    const result = yield client.deleteIncomingInvitation(invitation.id);
+                    if (!result.success) {
+                        console.error('[VrtxIncomingInvitations] API delete failed:', result.message);
+                        throw new Error(result.message || 'Failed to delete invitation');
+                    }
+                }
+                // Animate out after successful action
+                if (animateOut) {
+                    animateOut();
+                }
+                else {
+                    handleRemoveFromDisplay(invitation.id);
+                }
+            }
+            catch (err) {
+                console.error('[VrtxIncomingInvitations] Delete failed:', err);
+            }
+            finally {
+                setActionInProgress(null);
+            }
+        }));
+    }), [
+        incomingInvitationsConfig,
+        apiUrl,
+        jwt,
+        triggerHaptic,
+        deleteConfirmTitle,
+        deleteConfirmMessage,
+        showConfirmation,
+        handleRemoveFromDisplay,
+        onAnalyticsEvent,
+    ]);
+    // Helper to parse CSS padding string to React Native padding object
+    const parsePadding = (paddingStr) => {
+        if (!paddingStr)
+            return {};
+        const parts = paddingStr.trim().split(/\s+/);
+        if (parts.length === 1) {
+            const val = parseInt(parts[0], 10);
+            return isNaN(val) ? {} : { paddingVertical: val, paddingHorizontal: val };
+        }
+        if (parts.length === 2) {
+            const vertical = parseInt(parts[0], 10);
+            const horizontal = parseInt(parts[1], 10);
+            return Object.assign(Object.assign({}, (isNaN(vertical) ? {} : { paddingVertical: vertical })), (isNaN(horizontal) ? {} : { paddingHorizontal: horizontal }));
+        }
+        return {};
+    };
+    // Helper to parse border string (e.g., "1px solid #ccc")
+    const parseBorder = (borderStr) => {
+        if (!borderStr)
+            return {};
+        const match = borderStr.match(/^(\d+)px\s+(\w+)\s+(.+)$/);
+        if (match) {
+            return {
+                borderWidth: parseInt(match[1], 10),
+                borderColor: match[3],
+            };
+        }
+        return {};
+    };
+    // Render avatar or initials
+    const renderAvatar = (invitation) => {
+        if (invitation.avatarUrl) {
+            return <react_native_1.Image source={{ uri: invitation.avatarUrl }} style={styles.avatar}/>;
+        }
+        // Generate initials from name
+        const initials = invitation.name
+            .split(' ')
+            .map((part) => part[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+        // Handle avatar background with gradient support
+        const avatarBackground = avatarStyles.background;
+        const isAvatarGradient = avatarBackground === null || avatarBackground === void 0 ? void 0 : avatarBackground.includes('linear-gradient');
+        const avatarBgStyle = {};
+        if (isWeb && avatarBackground) {
+            avatarBgStyle.background = avatarBackground;
+        }
+        else if (isAvatarGradient && avatarBackground) {
+            const fallbackColor = parseGradientFirstColor(avatarBackground);
+            avatarBgStyle.backgroundColor = fallbackColor || colors.primaryBackground;
+        }
+        else {
+            avatarBgStyle.backgroundColor = avatarBackground || colors.primaryBackground;
+        }
+        return (<react_native_1.View style={[styles.avatarPlaceholder, avatarBgStyle]}>
+        <react_native_1.Text style={[styles.avatarInitials, { color: avatarStyles.color }]}>{initials}</react_native_1.Text>
+      </react_native_1.View>);
+    };
+    // Build button style with gradient support
+    const buildButtonStyle = (buttonStyles, fallbackBg) => {
+        const backgroundValue = buttonStyles.background;
+        const isGradient = backgroundValue === null || backgroundValue === void 0 ? void 0 : backgroundValue.includes('linear-gradient');
+        const dynamicButtonStyle = Object.assign(Object.assign(Object.assign({}, (buttonStyles.borderRadius
+            ? { borderRadius: parseInt(buttonStyles.borderRadius, 10) }
+            : {})), parsePadding(buttonStyles.padding)), parseBorder(buttonStyles.border));
+        if (isWeb && backgroundValue) {
+            dynamicButtonStyle.background = backgroundValue;
+        }
+        else if (isGradient && backgroundValue) {
+            const fallbackColor = parseGradientFirstColor(backgroundValue);
+            dynamicButtonStyle.backgroundColor = fallbackColor || fallbackBg;
+        }
+        else {
+            dynamicButtonStyle.backgroundColor = backgroundValue || fallbackBg;
+        }
+        return dynamicButtonStyle;
+    };
+    // Render a single invitation item
+    const renderInvitationContent = (item) => {
+        var _a, _b, _c;
+        const isLoading = actionInProgress === item.id;
+        const animateOut = (_a = item.metadata) === null || _a === void 0 ? void 0 : _a.animateOut;
+        // Build dynamic button styles
+        const deleteButtonDynamicStyle = buildButtonStyle(deleteButtonStyles, colors.secondaryBackground);
+        const acceptButtonDynamicStyle = buildButtonStyle(acceptButtonStyles, colors.primaryBackground);
+        // Build dynamic text styles
+        const deleteTextStyle = Object.assign(Object.assign({ color: deleteButtonStyles.color }, (deleteButtonStyles.fontSize ? { fontSize: parseInt(deleteButtonStyles.fontSize, 10) } : {})), (deleteButtonStyles.fontWeight ? { fontWeight: deleteButtonStyles.fontWeight } : {}));
+        const acceptTextStyle = Object.assign(Object.assign({ color: acceptButtonStyles.color }, (acceptButtonStyles.fontSize ? { fontSize: parseInt(acceptButtonStyles.fontSize, 10) } : {})), (acceptButtonStyles.fontWeight ? { fontWeight: acceptButtonStyles.fontWeight } : {}));
+        // Build dynamic name style
+        const dynamicNameStyle = Object.assign(Object.assign(Object.assign({ color: nameStyles.color }, (nameStyles.fontFamily ? { fontFamily: nameStyles.fontFamily } : {})), (nameStyles.fontSize ? { fontSize: parseInt(nameStyles.fontSize, 10) } : {})), (nameStyles.fontWeight ? { fontWeight: nameStyles.fontWeight } : {}));
+        // Build dynamic subtitle style
+        const dynamicSubtitleStyle = Object.assign(Object.assign({ color: subtitleStyles.color }, (subtitleStyles.fontFamily ? { fontFamily: subtitleStyles.fontFamily } : {})), (subtitleStyles.fontSize ? { fontSize: parseInt(subtitleStyles.fontSize, 10) } : {}));
+        return (<react_native_1.View style={styles.invitationItem}>
+        {renderAvatar(item)}
+        <react_native_1.View style={styles.invitationInfo}>
+          <react_native_1.Text style={[styles.invitationName, dynamicNameStyle]} numberOfLines={1}>
+            {item.name}
+          </react_native_1.Text>
+          {(() => {
+                var _a;
+                const displaySubtitle = (_a = incomingInvitationsConfig === null || incomingInvitationsConfig === void 0 ? void 0 : incomingInvitationsConfig.getSubtitle) === null || _a === void 0 ? void 0 : _a.call(incomingInvitationsConfig, item);
+                return displaySubtitle ? (<react_native_1.Text style={[styles.invitationSubtitle, dynamicSubtitleStyle]} numberOfLines={1}>
+                {displaySubtitle}
+              </react_native_1.Text>) : null;
+            })()}
+        </react_native_1.View>
+        <react_native_1.View style={styles.buttonContainer}>
+          {/* Delete button (left) */}
+          <ButtonWrapper style={[styles.actionButton, deleteButtonDynamicStyle, styles.deleteButton]} gradientString={((_b = deleteButtonStyles.background) === null || _b === void 0 ? void 0 : _b.includes('gradient')) ? deleteButtonStyles.background : null} onPress={() => handleDelete(item, animateOut)} disabled={isLoading}>
+            {isLoading ? (<react_native_1.ActivityIndicator size="small" color={deleteButtonStyles.color}/>) : (<react_native_1.Text style={[styles.actionButtonText, deleteTextStyle]}>{deleteButtonText}</react_native_1.Text>)}
+          </ButtonWrapper>
+          {/* Accept button (right) */}
+          <ButtonWrapper style={[styles.actionButton, acceptButtonDynamicStyle]} gradientString={((_c = acceptButtonStyles.background) === null || _c === void 0 ? void 0 : _c.includes('gradient')) ? acceptButtonStyles.background : null} onPress={() => handleAccept(item, animateOut)} disabled={isLoading}>
+            {isLoading ? (<react_native_1.ActivityIndicator size="small" color={acceptButtonStyles.color}/>) : (<react_native_1.Text style={[styles.actionButtonText, acceptTextStyle]}>{acceptButtonText}</react_native_1.Text>)}
+          </ButtonWrapper>
+        </react_native_1.View>
+      </react_native_1.View>);
+    };
+    // Render item with animation wrapper
+    const renderItem = ({ item }) => {
+        return (<AnimatedInvitationItem item={item} renderContent={renderInvitationContent} onRemove={handleRemoveFromDisplay}/>);
+    };
+    // Show placeholder if no config provided and no API credentials
+    if (!incomingInvitationsConfig && !(apiUrl && jwt)) {
+        const label = ((_y = block === null || block === void 0 ? void 0 : block.attributes) === null || _y === void 0 ? void 0 : _y.label) || '';
+        return (<react_native_1.View style={styles.container}>
+        {label ? <react_native_1.Text style={[styles.label, { color: colors.foreground }]}>{label}</react_native_1.Text> : null}
+        <react_native_1.Text style={[styles.placeholderText, { color: colors.secondaryForeground }]}>
+          Incoming Invitations component - provide incomingInvitationsConfig or apiUrl+jwt to enable
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    // Loading state — only shown when there are no config invitations to display
+    if (isLoading) {
+        return (<react_native_1.View style={styles.container}>
+        <react_native_1.ActivityIndicator size="large" color={colors.primaryBackground}/>
+      </react_native_1.View>);
+    }
+    // Empty state - render nothing (0 height) when no invitations, like iOS
+    if (displayedInvitations.length === 0) {
+        return null;
+    }
+    // Get title from block attributes (configured in editor as "Title")
+    const title = (_z = block === null || block === void 0 ? void 0 : block.attributes) === null || _z === void 0 ? void 0 : _z.title;
+    // Build dynamic title style
+    const dynamicTitleStyle = Object.assign(Object.assign(Object.assign({ color: titleStyles.color }, (titleStyles.fontFamily ? { fontFamily: titleStyles.fontFamily } : {})), (titleStyles.fontSize ? { fontSize: parseInt(titleStyles.fontSize, 10) } : {})), (titleStyles.fontWeight ? { fontWeight: titleStyles.fontWeight } : {}));
+    // Main view: Invitations list
+    // Note: Using View + map instead of FlatList to avoid "VirtualizedLists should never be nested" warning
+    // when this component is rendered inside a ScrollView (which InviteFormCore uses)
+    return (<react_native_1.View style={styles.listContainer}>
+      {title && (<react_native_1.Text style={[styles.title, dynamicTitleStyle]}>{title}</react_native_1.Text>)}
+      <react_native_1.View style={styles.listContent}>
+        {displayedInvitations.map((item) => (<react_native_1.View key={item.id}>
+            {renderItem({ item })}
+          </react_native_1.View>))}
+      </react_native_1.View>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 120,
+    },
+    listContainer: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 12,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 12,
+    },
+    placeholderText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    emptyText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    listContent: {
+        paddingBottom: 16,
+    },
+    invitationItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+    },
+    avatar: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+    },
+    avatarPlaceholder: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    avatarInitials: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    invitationInfo: {
+        flex: 1,
+        marginLeft: 12,
+        marginRight: 12,
+    },
+    invitationName: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    invitationSubtitle: {
+        fontSize: 13,
+        marginTop: 2,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    actionButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 8,
+        minWidth: 70,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    deleteButton: {
+        marginRight: 8,
+    },
+    actionButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=VrtxIncomingInvitations.js.map