@teamvortexsoftware/vortex-react-native 1.0.0 → 1.0.1

package/dist/components/VrtxOutgoingInvitations.js

@@ -0,0 +1,572 @@
+"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.VrtxOutgoingInvitations = VrtxOutgoingInvitations;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const analytics_client_1 = require("@teamvortexsoftware/analytics-client");
+const invitationEvents_1 = require("../utils/invitationEvents");
+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;
+}
+// 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)(() => {
+        // Use sequential animations to avoid mixing useNativeDriver: true and false
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 150,
+            useNativeDriver: true,
+        }).start(() => {
+            onRemove(item.id);
+        });
+    }, [fadeAnim, item.id, onRemove]);
+    return (<react_native_1.Animated.View style={{
+            opacity: fadeAnim,
+        }}>
+      {renderContent(Object.assign(Object.assign({}, item), { metadata: Object.assign(Object.assign({}, item.metadata), { animateOut }) }))}
+    </react_native_1.Animated.View>);
+}
+function VrtxOutgoingInvitations({ block, outgoingInvitationsConfig, 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;
+    // Extract mock invitations from config (internal preview use only)
+    const _mockInvitations = outgoingInvitationsConfig === null || outgoingInvitationsConfig === void 0 ? void 0 : outgoingInvitationsConfig._mockInvitations;
+    // Local state for managing the displayed invitations (for animate-out)
+    const [displayedInvitations, setDisplayedInvitations] = (0, react_1.useState)([]);
+    const [actionInProgress, setActionInProgress] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Use mock mode if _mockInvitations provided (preview), otherwise API mode
+    const isMockMode = !!_mockInvitations;
+    // Fetch invitations from API
+    const fetchInvitations = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!apiUrl || !jwt)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = yield fetch(`${apiUrl}/api/v1/invitations/sent`, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${jwt}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch invitations: ${response.status}`);
+            }
+            const data = yield response.json();
+            // Filter out shareable link invitations (targetType "share") - matches iOS SDK
+            const filtered = (((_a = data.data) === null || _a === void 0 ? void 0 : _a.invitations) || []).filter((inv) => {
+                var _a, _b;
+                const targetType = (_b = (_a = inv.targets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetType;
+                return targetType !== 'share';
+            });
+            const mappedInvitations = filtered.map((inv) => {
+                var _a, _b, _c;
+                // Extract target (invitee) info from the targets array - matches iOS SDK
+                const target = (_a = inv.targets) === null || _a === void 0 ? void 0 : _a[0];
+                const targetName = target === null || target === void 0 ? void 0 : target.targetName;
+                const targetValue = target === null || target === void 0 ? void 0 : target.targetValue;
+                // Use targetName as display name if available, otherwise fall back to targetValue
+                const name = (_c = (_b = targetName !== null && targetName !== void 0 ? targetName : targetValue) !== null && _b !== void 0 ? _b : inv.senderIdentifier) !== null && _c !== void 0 ? _c : 'Unknown';
+                return {
+                    id: inv.id,
+                    name,
+                    userId: targetValue,
+                    avatarUrl: target === null || target === void 0 ? void 0 : target.targetAvatarUrl,
+                    isVortexInvitation: true,
+                    metadata: inv,
+                };
+            });
+            // Merge config invitations with API invitations, deduplicating by userId.
+            const configInvitations = (outgoingInvitationsConfig === null || outgoingInvitationsConfig === void 0 ? void 0 : outgoingInvitationsConfig.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 (err) {
+            console.error('[VrtxOutgoingInvitations] Fetch failed:', err);
+            setError(err instanceof Error ? err.message : 'Failed to load invitations');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }), [apiUrl, jwt, outgoingInvitationsConfig === null || outgoingInvitationsConfig === void 0 ? void 0 : outgoingInvitationsConfig.invitations]);
+    // Revoke invitation via API
+    const revokeInvitation = (0, react_1.useCallback)((invitationId) => __awaiter(this, void 0, void 0, function* () {
+        if (!apiUrl || !jwt)
+            return false;
+        try {
+            const response = yield fetch(`${apiUrl}/api/v1/invitations/${invitationId}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${jwt}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok && response.status !== 204) {
+                throw new Error(`Failed to revoke invitation: ${response.status}`);
+            }
+            return true;
+        }
+        catch (err) {
+            console.error('[VrtxOutgoingInvitations] Revoke failed:', err);
+            return false;
+        }
+    }), [apiUrl, jwt]);
+    // Fetch invitations on mount - use mock data in preview mode, otherwise fetch from API
+    (0, react_1.useEffect)(() => {
+        if (isMockMode) {
+            setDisplayedInvitations(_mockInvitations || []);
+        }
+        else {
+            fetchInvitations();
+        }
+    }, [isMockMode, _mockInvitations, fetchInvitations]);
+    // Subscribe to invitation events to refresh the list when new invitations are created
+    (0, react_1.useEffect)(() => {
+        if (isMockMode)
+            return; // Don't subscribe in mock mode
+        const unsubscribe = (0, invitationEvents_1.subscribeToInvitationEvent)('invitationCreated', () => {
+            console.log('[VrtxOutgoingInvitations] Invitation created event received, refreshing...');
+            fetchInvitations();
+        });
+        return unsubscribe;
+    }, [isMockMode, fetchInvitations]);
+    // Extract customization from block settings (widget configuration), with defaults
+    const blockCustomizations = (_a = block === null || block === void 0 ? void 0 : block.settings) === null || _a === void 0 ? void 0 : _a.customizations;
+    const cancelButtonText = (_c = (_b = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.cancelButton) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : 'Cancel';
+    const emptyStateMessage = (_e = (_d = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.emptyStateMessage) === null || _d === void 0 ? void 0 : _d.textContent) !== null && _e !== void 0 ? _e : 'No sent invitations';
+    // Confirmation dialog texts from widget configuration
+    const cancelConfirmTitle = (_g = (_f = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.cancelConfirmTitle) === null || _f === void 0 ? void 0 : _f.textContent) !== null && _g !== void 0 ? _g : 'Cancel Invitation';
+    const cancelConfirmMessage = (_j = (_h = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.cancelConfirmMessage) === null || _h === void 0 ? void 0 : _h.textContent) !== null && _j !== void 0 ? _j : 'Cancel invitation to {name}?';
+    const confirmButtonText = (_l = (_k = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.confirmButtonText) === null || _k === void 0 ? void 0 : _k.textContent) !== null && _l !== void 0 ? _l : 'Confirm';
+    const dismissButtonText = (_o = (_m = blockCustomizations === null || blockCustomizations === void 0 ? void 0 : blockCustomizations.dismissButtonText) === null || _m === void 0 ? void 0 : _m.textContent) !== null && _o !== void 0 ? _o : 'Keep';
+    // 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: (_p = theme === null || theme === void 0 ? void 0 : theme.primaryBackground) !== null && _p !== void 0 ? _p : '#6291d5',
+        primaryForeground: (_q = theme === null || theme === void 0 ? void 0 : theme.primaryForeground) !== null && _q !== void 0 ? _q : '#ffffff',
+        secondaryBackground: (_r = theme === null || theme === void 0 ? void 0 : theme.secondaryBackground) !== null && _r !== void 0 ? _r : '#ffffff',
+        secondaryForeground: (_s = theme === null || theme === void 0 ? void 0 : theme.secondaryForeground) !== null && _s !== void 0 ? _s : '#353e5c',
+        foreground: (_t = theme === null || theme === void 0 ? void 0 : theme.foreground) !== null && _t !== void 0 ? _t : '#334153',
+        border: (_u = theme === null || theme === void 0 ? void 0 : theme.border) !== null && _u !== void 0 ? _u : '#cccccc',
+    };
+    // Button styles from block.theme.options (microTheme)
+    const cancelButtonStyles = {
+        background: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-background') ||
+            colors.secondaryBackground,
+        color: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-color') ||
+            colors.secondaryForeground,
+        borderRadius: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-border-radius'),
+        border: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-border'),
+        padding: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-padding'),
+        fontSize: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-outgoing-invitations-cancel-button-font-weight'),
+    };
+    // Avatar/initials styles from block.theme.options (microTheme)
+    const avatarStyles = {
+        background: getBlockThemeValue('--vrtx-outgoing-invitations-avatar-background') ||
+            colors.primaryBackground,
+        color: getBlockThemeValue('--vrtx-outgoing-invitations-avatar-color') || colors.primaryForeground,
+    };
+    // Contact name styles from block.theme.options (microTheme)
+    const nameStyles = {
+        color: getBlockThemeValue('--vrtx-outgoing-invitations-name-color') || colors.foreground,
+        fontFamily: getBlockThemeValue('--vrtx-outgoing-invitations-name-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-outgoing-invitations-name-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-outgoing-invitations-name-font-weight'),
+    };
+    // Subtitle styles from block.theme.options (microTheme)
+    const subtitleStyles = {
+        color: getBlockThemeValue('--vrtx-outgoing-invitations-subtitle-color') ||
+            colors.secondaryForeground,
+        fontFamily: getBlockThemeValue('--vrtx-outgoing-invitations-subtitle-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-outgoing-invitations-subtitle-font-size'),
+    };
+    // Title styles from block.theme.options (microTheme)
+    const titleStyles = {
+        color: getBlockThemeValue('--vrtx-outgoing-invitations-title-color') || colors.foreground,
+        fontFamily: getBlockThemeValue('--vrtx-outgoing-invitations-title-font-family'),
+        fontSize: getBlockThemeValue('--vrtx-outgoing-invitations-title-font-size'),
+        fontWeight: getBlockThemeValue('--vrtx-outgoing-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: dismissButtonText,
+                    style: 'cancel',
+                },
+                {
+                    text: confirmButtonText,
+                    onPress: onConfirm,
+                },
+            ]);
+        }
+    }, [confirmButtonText, dismissButtonText]);
+    // Handle Cancel button press
+    const handleCancel = (0, react_1.useCallback)((invitation, animateOut) => __awaiter(this, void 0, void 0, function* () {
+        const message = cancelConfirmMessage.replace('{name}', invitation.name);
+        showConfirmation(cancelConfirmTitle, 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.OUTBOUND_INVITATION_DELETE_CLICKED,
+                payload: { invitationId: invitation.id, inviteeName: invitation.name },
+            });
+            try {
+                // Call the callback if provided and check return value
+                let shouldProceed = true;
+                if (outgoingInvitationsConfig === null || outgoingInvitationsConfig === void 0 ? void 0 : outgoingInvitationsConfig.onCancel) {
+                    const result = yield outgoingInvitationsConfig.onCancel(invitation);
+                    // If callback returns false explicitly, don't proceed
+                    if (result === false) {
+                        shouldProceed = false;
+                    }
+                }
+                if (!shouldProceed) {
+                    setActionInProgress(null);
+                    return;
+                }
+                // In mock mode (web), skip API call AND don't remove the invitation (no-op)
+                if (isMockMode) {
+                    // No-op in mock mode
+                }
+                else {
+                    // Real mode: call DELETE endpoint and remove on success
+                    const success = yield revokeInvitation(invitation.id);
+                    if (success) {
+                        // Animate out after successful action
+                        if (animateOut) {
+                            animateOut();
+                        }
+                        else {
+                            handleRemoveFromDisplay(invitation.id);
+                        }
+                    }
+                }
+            }
+            catch (err) {
+                console.error('[VrtxOutgoingInvitations] Cancel failed:', err);
+            }
+            finally {
+                setActionInProgress(null);
+            }
+        }));
+    }), [
+        outgoingInvitationsConfig,
+        revokeInvitation,
+        triggerHaptic,
+        cancelConfirmTitle,
+        cancelConfirmMessage,
+        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;
+        const isLoading = actionInProgress === item.id;
+        const animateOut = (_a = item.metadata) === null || _a === void 0 ? void 0 : _a.animateOut;
+        // Build dynamic button style
+        const cancelButtonDynamicStyle = buildButtonStyle(cancelButtonStyles, colors.secondaryBackground);
+        // Build dynamic text style
+        const cancelTextStyle = Object.assign(Object.assign({ color: cancelButtonStyles.color }, (cancelButtonStyles.fontSize
+            ? { fontSize: parseInt(cancelButtonStyles.fontSize, 10) }
+            : {})), (cancelButtonStyles.fontWeight ? { fontWeight: cancelButtonStyles.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 = outgoingInvitationsConfig === null || outgoingInvitationsConfig === void 0 ? void 0 : outgoingInvitationsConfig.getSubtitle) === null || _a === void 0 ? void 0 : _a.call(outgoingInvitationsConfig, item);
+                return displaySubtitle ? (<react_native_1.Text style={[styles.invitationSubtitle, dynamicSubtitleStyle]} numberOfLines={1}>
+                {displaySubtitle}
+              </react_native_1.Text>) : null;
+            })()}
+        </react_native_1.View>
+        {/* Cancel button */}
+        <react_native_1.TouchableOpacity style={[styles.actionButton, cancelButtonDynamicStyle]} onPress={() => handleCancel(item, animateOut)} disabled={isLoading} activeOpacity={0.7}>
+          {isLoading ? (<react_native_1.ActivityIndicator size="small" color={cancelButtonStyles.color}/>) : (<react_native_1.Text style={[styles.actionButtonText, cancelTextStyle]}>{cancelButtonText}</react_native_1.Text>)}
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>);
+    };
+    // Render item with animation wrapper
+    const renderItem = ({ item }) => {
+        return (<AnimatedInvitationItem item={item} renderContent={renderInvitationContent} onRemove={handleRemoveFromDisplay}/>);
+    };
+    // Loading state (API mode)
+    if (isLoading) {
+        return (<react_native_1.View style={styles.container}>
+        <react_native_1.ActivityIndicator size="large" color={colors.primaryBackground}/>
+      </react_native_1.View>);
+    }
+    // Error state (API mode)
+    if (error) {
+        return (<react_native_1.View style={styles.container}>
+        <react_native_1.Text style={[styles.errorText, { color: '#dc2626' }]}>{error}</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    // Empty state - render nothing (no-op component with no height)
+    if (displayedInvitations.length === 0) {
+        return null;
+    }
+    // Get title from block attributes (configured in editor as "Title")
+    const title = (_v = block === null || block === void 0 ? void 0 : block.attributes) === null || _v === void 0 ? void 0 : _v.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,
+    },
+    placeholderText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    emptyText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    errorText: {
+        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,
+    },
+    actionButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 8,
+        minWidth: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    actionButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=VrtxOutgoingInvitations.js.map