@teamvortexsoftware/vortex-react-native 0.0.8 → 0.0.10

package/dist/components/ShareButtons.js

@@ -0,0 +1,170 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareButton = ShareButton;
+exports.ShareButtons = ShareButtons;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const FontAwesome6_1 = __importDefault(require("react-native-vector-icons/FontAwesome6"));
+const react_native_qrcode_svg_1 = __importDefault(require("react-native-qrcode-svg"));
+function ShareButton({ iconName, label, onPress, themeColors, themeStyles }) {
+    return (<react_native_1.View style={styles.shareButtonWrapper}>
+      <react_native_1.Pressable style={[styles.shareButton, themeStyles.secondaryButton]} onPress={onPress}>
+        <react_native_1.View style={styles.buttonContentContainer}>
+          <FontAwesome6_1.default name={iconName} size={24} color={themeColors.secondaryButtonForeground}/>
+          <react_native_1.Text style={[styles.shareButtonText, themeStyles.secondaryButtonText]}>{label}</react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.Pressable>
+    </react_native_1.View>);
+}
+function ShareButtons({ has, themeColors, themeStyles, handleShareLink, handleCopyLink, shareableLink, }) {
+    const [showQRCode, setShowQRCode] = (0, react_1.useState)(false);
+    // Define button configurations
+    const buttonConfigs = [
+        {
+            key: 'shareOptionsNativeShareSheet',
+            iconName: 'share-nodes',
+            label: 'Native Share',
+            onPress: handleShareLink,
+            isAvailable: has.shareOptionsNativeShareSheet,
+        },
+        {
+            key: 'shareOptionsCopyLink',
+            iconName: 'copy',
+            label: 'Copy',
+            onPress: handleCopyLink,
+            isAvailable: true, // Always available when share is enabled
+            isWithShowUrl: has.shareOptionsCopyLink, // Special handling only if specifically enabled
+        },
+        {
+            key: 'shareOptionsQRCode',
+            iconName: 'qrcode',
+            label: 'QR Code',
+            onPress: () => setShowQRCode(!showQRCode),
+            isAvailable: has.shareOptionsQrCode,
+        },
+        {
+            key: 'shareOptionsWhatsApp',
+            iconName: 'whatsapp',
+            label: 'WhatsApp',
+            onPress: () => { },
+            isAvailable: has.shareOptionsWhatsApp,
+        },
+        {
+            key: 'shareOptionsSms',
+            iconName: 'message',
+            label: 'SMS',
+            onPress: () => { },
+            isAvailable: has.shareOptionsSms,
+        },
+        // Add more share options as needed
+        // Example:
+        // {
+        //   key: 'shareOptionsFacebookMessenger',
+        //   iconName: 'facebook-messenger',
+        //   label: 'Messenger',
+        //   onPress: () => {},
+        //   isAvailable: has.shareOptionsFacebookMessenger,
+        // },
+    ];
+    return (<>
+      {showQRCode && shareableLink && (<react_native_1.View style={styles.qrCodeContainer}>
+          <react_native_qrcode_svg_1.default value={shareableLink} size={200} color={themeColors.containerForeground} backgroundColor={themeColors.containerBackground}/>
+        </react_native_1.View>)}
+      {buttonConfigs
+            .filter((config) => config.isAvailable)
+            .map((config) => config.isWithShowUrl && config.key === 'shareOptionsCopyLink' && shareableLink ? (<react_native_1.View key={config.key} style={styles.copyLinkContainer}>
+              <react_native_1.TextInput style={[
+                styles.linkInput,
+                { color: themeColors.containerForeground, borderColor: themeColors.containerBorder },
+            ]} value={shareableLink} editable={false}/>
+              <react_native_1.Pressable style={[styles.copyButton, themeStyles.secondaryButton]} onPress={handleCopyLink}>
+                <FontAwesome6_1.default name="copy" size={20} color={themeColors.secondaryButtonForeground}/>
+              </react_native_1.Pressable>
+            </react_native_1.View>) : (<ShareButton key={config.key} iconName={config.iconName} label={config.label} onPress={config.onPress} themeColors={themeColors} themeStyles={themeStyles}/>))}
+    </>);
+}
+const styles = react_native_1.StyleSheet.create({
+    shareButtonWrapper: {
+        width: '48%',
+        margin: 5,
+    },
+    shareButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderWidth: 1,
+        borderRadius: 5,
+        justifyContent: 'center',
+    },
+    buttonContentContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    shareButtonText: {
+        marginLeft: 10,
+    },
+    qrCodeContainer: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 20,
+        padding: 10,
+    },
+    copyLinkContainer: {
+        width: '100%',
+        flexDirection: 'row',
+        marginVertical: 5,
+        alignItems: 'center',
+    },
+    linkInput: {
+        flex: 1,
+        borderWidth: 1,
+        borderRadius: 5,
+        padding: 10,
+        marginRight: 5,
+    },
+    copyButton: {
+        width: 44,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderRadius: 5,
+    },
+});

package/dist/hooks/useThemeStyles.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeStyles = useThemeStyles;
+const react_1 = require("react");
+/**
+ * Hook to generate dynamic styles based on theme colors
+ * @param themeColors The theme colors object
+ * @returns Object containing styled components based on the theme
+ */
+function useThemeStyles(themeColors) {
+    const themeStyles = (0, react_1.useMemo)(() => ({
+        primaryButton: {
+            backgroundColor: themeColors.primaryButtonBackground,
+            borderColor: themeColors.primaryButtonBorder,
+        },
+        primaryButtonText: {
+            color: themeColors.primaryButtonForeground,
+        },
+        secondaryButton: {
+            backgroundColor: themeColors.secondaryButtonBackground,
+            borderColor: themeColors.secondaryButtonBorder,
+        },
+        secondaryButtonText: {
+            color: themeColors.secondaryButtonForeground,
+        },
+        containerStyles: {
+            backgroundColor: themeColors.containerBackground,
+        },
+        textStyles: {
+            color: themeColors.containerForeground,
+        },
+        inputStyles: {
+            borderColor: themeColors.containerBorder,
+            color: themeColors.containerForeground,
+            backgroundColor: themeColors.containerBackground,
+        },
+    }), [themeColors]);
+    return themeStyles;
+}

package/dist/hooks/useVortexInvite.js

@@ -0,0 +1,281 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVortexInvite = useVortexInvite;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const api_1 = __importDefault(require("../shared/api"));
+const themeUtils_1 = require("../utils/themeUtils");
+const useThemeStyles_1 = require("./useThemeStyles");
+const expo_standard_web_crypto_1 = require("expo-standard-web-crypto");
+const uuid_1 = require("uuid");
+const formUtils_1 = require("../utils/formUtils");
+(0, expo_standard_web_crypto_1.polyfillWebCrypto)();
+function useVortexInvite({ widgetId, environmentId, vortexApiHost, isLoading = false, jwt, onSuccess, onError, }) {
+    const vortexClient = (0, react_1.useMemo)(() => new api_1.default(vortexApiHost, (0, uuid_1.v4)()), [vortexApiHost]);
+    const [widgetConfiguration, setWidgetConfiguration] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)(null);
+    const [fetching, setFetching] = (0, react_1.useState)(isLoading);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [shareableLink, setShareableLink] = (0, react_1.useState)();
+    const [inviteLoading, setInviteLoading] = (0, react_1.useState)(false);
+    const [showSuccessMessage, setShowSuccessMessage] = (0, react_1.useState)(false);
+    const opacity = new react_native_1.Animated.Value(0.3);
+    // Extract theme colors and feature flags using utility functions
+    const themeColors = (0, react_1.useMemo)(() => (0, themeUtils_1.extractThemeColors)(widgetConfiguration), [widgetConfiguration]);
+    // Extract form configuration
+    const formConfig = (0, react_1.useMemo)(() => (0, formUtils_1.extractFormConfiguration)(widgetConfiguration), [widgetConfiguration]);
+    // Get base theme styles
+    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(themeColors);
+    // Merge theme styles with component-specific styles from form configuration
+    const themeStyles = (0, react_1.useMemo)(() => (0, formUtils_1.mergeThemeAndComponentStyles)(baseThemeStyles, themeColors, formConfig), [baseThemeStyles, themeColors, formConfig]);
+    const options = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) || {};
+    }, [widgetConfiguration]);
+    // Extract form layout information
+    const formLayout = (0, react_1.useMemo)(() => ({
+        emailPlaceholder: (0, formUtils_1.getEmailPlaceholder)(formConfig),
+        submitButtonLabel: (0, formUtils_1.getSubmitButtonLabel)(formConfig),
+        isGridLayout: (0, formUtils_1.hasGridLayout)(formConfig),
+        hasSeparateColumns: (0, formUtils_1.hasEmailAndShareInSeparateColumns)(formConfig),
+        formConfig,
+    }), [formConfig]);
+    const has = (0, react_1.useMemo)(() => {
+        const flags = (0, themeUtils_1.extractFeatureFlags)(widgetConfiguration);
+        console.log('[Vortex] Invite has', flags);
+        return flags;
+    }, [widgetConfiguration]);
+    // Log the host only once when the hook mounts
+    (0, react_1.useEffect)(() => {
+        if (vortexApiHost.indexOf('localhost') > -1) {
+            console.warn('[Vortex] Invite Using localhost as host');
+        }
+    }, [vortexApiHost]);
+    // Loading animation effect
+    (0, react_1.useEffect)(() => {
+        const animation = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 1000,
+                useNativeDriver: false,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 0.3,
+                duration: 1000,
+                useNativeDriver: false,
+            }),
+        ]));
+        animation.start();
+        setTimeout(() => {
+            setLoading(false);
+            animation.stop();
+        }, 2000);
+    }, [opacity]);
+    // Fetch widget configuration if needed
+    (0, react_1.useEffect)(() => {
+        // Case: If `widgetConfiguration` is already set, do nothing
+        if (widgetConfiguration) {
+            console.log('[Vortex] Invite Already has widgetConfiguration, skipping fetch');
+            return;
+        }
+        if (!jwt) {
+            console.log('[Vortex] Invite JWT is required');
+            return;
+        }
+        const fetchData = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            console.log('[Vortex] Invite Fetching Data...');
+            setFetching(true);
+            setLoading(true);
+            setError(null);
+            try {
+                const result = yield vortexClient.getWidgetConfiguration(widgetId, jwt, environmentId);
+                if ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.widgetConfiguration) {
+                    setWidgetConfiguration(result.data.widgetConfiguration);
+                    console.log('[Vortex] Invite Successfully fetched widgetConfiguration', JSON.stringify(result.data.widgetConfiguration));
+                }
+                else {
+                    const error = (result === null || result === void 0 ? void 0 : result.error) || 'No configuration data found.';
+                    console.error(`[Vortex] Invite ${error}`);
+                    throw new Error(error);
+                }
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    const fetchError = err;
+                    console.error('[Vortex] Invite Error Details:', {
+                        message: fetchError.message,
+                        status: fetchError.status || 'unknown',
+                        statusText: fetchError.statusText,
+                        body: fetchError.body,
+                        stack: fetchError.stack,
+                    });
+                }
+                console.error('[Vortex] Invite Error', err);
+                setError({
+                    message: err.message || 'Something went wrong!',
+                });
+            }
+            finally {
+                setFetching(false);
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [widgetId, jwt, environmentId, vortexClient, widgetConfiguration]);
+    const handleInviteClick = (contentTokens) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setInviteLoading(true);
+            setShowSuccessMessage(false);
+            if (!(widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.id)) {
+                console.log('[Vortex Invite] Widget configuration ID is required');
+                return;
+            }
+            // const url = `${host}/api/v1/no-auth/components/widget-configuration/${widgetConfigurationId}/invite`; // TODO should we use options.widgetHost?.value ?
+            console.log('[Vortex] Invite Sending invitation', {
+                email,
+                widgetId,
+                environmentId,
+            });
+            if (!jwt) {
+                throw new Error('[Vortex Invite] JWT is required');
+            }
+            const payload = Object.assign(Object.assign({}, contentTokens), { email: {
+                    value: email,
+                    type: 'email',
+                } });
+            const body = yield vortexClient.createInvite(jwt, widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.id, environmentId, payload);
+            console.log('[Vortex] Invite Response', body);
+            if (onSuccess) {
+                onSuccess({
+                    type: 'invite',
+                    data: 'Email invite sent',
+                });
+            }
+            setShowSuccessMessage(true);
+            // Auto-hide success message after 5 seconds
+            setTimeout(() => {
+                setShowSuccessMessage(false);
+            }, 5000);
+            return;
+        }
+        catch (error) {
+            console.error('[Vortex]', error);
+            if (onError) {
+                onError(error instanceof Error ? error : new Error(String(error)), 'invite');
+            }
+            throw error; // Re-throw the error to be caught by the component
+        }
+        finally {
+            setInviteLoading(false);
+        }
+    });
+    const getShareableLink = () => {
+        return vortexClient.getShareableLinkFormatted();
+    };
+    const getShareableInviteLink = () => __awaiter(this, void 0, void 0, function* () {
+        // if (this.isLoading || !this.vortex) {
+        //   return;
+        // }
+        if (!jwt || !(widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.id) || !vortexClient) {
+            return;
+        }
+        if (shareableLink) {
+            return shareableLink;
+        }
+        const invite = yield vortexClient.createShareableInvite(jwt, widgetConfiguration.id, environmentId);
+        if (!invite || !invite.data || !invite.data.invitation.id) {
+            console.error('No shareable link found');
+            onError === null || onError === void 0 ? void 0 : onError(new Error('No shareable link found'), 'share');
+            // this.error = {
+            //   message: 'No sharable link found',
+            // };
+            // this.host.requestUpdate();
+            return;
+        }
+        const link = `${vortexApiHost}/noauth/invite/${invite.data.invitation.id}`;
+        console.log(`getShareableInviteLink: ${link}`);
+        setShareableLink(link); // TODO - need to differentiate invite host vs api host even though they are the same for now)
+        return link;
+    });
+    const handleShareLink = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const shareableLink = yield getShareableInviteLink();
+            if (!shareableLink) {
+                throw new Error('No shareable link available');
+            }
+            yield react_native_1.Share.share({
+                message: shareableLink,
+                title: 'Share Invite Link',
+            });
+            console.log('[Vortex] handleShareLink', 'The invite link has been shared.');
+            if (onSuccess) {
+                onSuccess({
+                    type: 'share',
+                    data: 'Sharable link used',
+                });
+            }
+        }
+        catch (error) {
+            console.error('[Vortex] Failed to share link:', error);
+            if (onError) {
+                onError(error instanceof Error ? error : new Error(String(error)), 'share');
+            }
+        }
+    });
+    const handleCopyLink = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const shareableLink = yield getShareableInviteLink();
+            if (!shareableLink) {
+                throw new Error('No shareable link available');
+            }
+            yield react_native_1.Clipboard.setString(shareableLink);
+            console.log('[Vortex] handleCopyLink', 'The invite link has been copied.');
+            if (onSuccess) {
+                onSuccess({
+                    type: 'share',
+                    data: 'Sharable copied',
+                });
+            }
+        }
+        catch (error) {
+            console.error('[Vortex] Failed to copy link:', error);
+            if (onError) {
+                onError(error instanceof Error ? error : new Error(String(error)), 'share');
+            }
+        }
+    });
+    return {
+        widgetConfiguration,
+        error,
+        fetching,
+        loading,
+        email,
+        setEmail,
+        opacity,
+        themeColors,
+        themeStyles,
+        has,
+        options,
+        inviteLoading,
+        showSuccessMessage,
+        handleInviteClick,
+        handleShareLink,
+        handleCopyLink,
+        getShareableLink,
+        formLayout,
+    };
+}

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VortexInvite = void 0;
+var vortexInvite_1 = require("./vortexInvite");
+Object.defineProperty(exports, "VortexInvite", { enumerable: true, get: function () { return vortexInvite_1.VortexInvite; } });

package/dist/shared/InvitationResult.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/shared/api.js

@@ -0,0 +1,90 @@
+"use strict";
+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 });
+class VortexClient {
+    constructor(baseUrl, sessionId) {
+        this.sessionId = sessionId;
+        // trim ending /
+        this.baseUrl = baseUrl.replace(/\/+$/, '');
+    }
+    getWidgetConfiguration(widgetId, jwt, environmentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const url = `${this.baseUrl}/api/v1/environment/${environmentId}/widgets/${widgetId}`;
+            console.log('[VortexClient] getWidgetConfiguration', { url });
+            const response = yield fetch(url, {
+                headers: {
+                    Authorization: `Bearer ${jwt}`,
+                    'x-session-id': this.sessionId,
+                },
+            });
+            if (!response.ok) {
+                const body = yield response.text();
+                console.error('[VortexClient] getWidgetConfiguration', { status: response.status, body });
+                throw new Error(`Error fetching widget configuration from ${url}: ${response.status}`);
+            }
+            const data = yield response.json();
+            console.log('[VortexClient] getWidgetConfiguration', { data });
+            return data;
+        });
+    }
+    createInvite(jwt, widgetConfigurationId, environmentId, payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield fetch(`${this.baseUrl}/api/v1/environment/${environmentId}/widget-configuration/${widgetConfigurationId}/invite`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${jwt}`,
+                    'x-session-id': this.sessionId,
+                },
+                body: JSON.stringify({
+                    data: {
+                        payload,
+                    },
+                }),
+            });
+            if (!response.ok) {
+                const body = yield response.text();
+                console.error('[VortexClient] createInvite', { status: response.status, body });
+                throw new Error(`Error POSTing widget invite: ${response.status}`);
+            }
+            const data = yield response.json();
+            console.log('[VortexClient] createInvite', data);
+            return data;
+        });
+    }
+    getShareableLinkFormatted() {
+        return `${this.baseUrl}/noauth/invite/...`;
+    }
+    createShareableInvite(jwt, widgetConfigurationId, environmentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.debug('[VortexClient] createShareableInvite request', {
+                widgetConfigurationId,
+                environmentId,
+                jwt,
+            });
+            const response = yield fetch(`${this.baseUrl}/api/v1/environment/${environmentId}/widget-configuration/${widgetConfigurationId}/generate-shareable-link-invite`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${jwt}`,
+                    'x-session-id': this.sessionId,
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Error POSTing widget invite: ${response.statusText}`);
+            }
+            const data = yield response.json();
+            console.debug(`[VortexClient] createShareableInvite response ${JSON.stringify(data)}`);
+            return data;
+        });
+    }
+}
+exports.default = VortexClient;