@teamvortexsoftware/vortex-react-native 0.0.5 → 0.0.6

package/README.md

@@ -39,4 +39,4 @@ import { VortexInvite } from '@teamvortexsoftware/vortex-react-native';
 
 - React 18.3.1 or higher
 - React Native 0.74.5 or higher
-- pnpm 10.8.1 or higher 
+- pnpm 10.10.0 or higher 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@teamvortexsoftware/vortex-react-native",
   "description": "",
   "author": "@teamvortexsoftware",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "publishConfig": {
     "access": "restricted"
   },
@@ -17,17 +17,19 @@
     "@typescript-eslint/parser": "^7.3.1",
     "eslint": "^9.24.0",
     "eslint-plugin-react-native": "^4.1.0",
-    "tsup": "8.0.1",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.30.1",
     "@teamvortexsoftware/eslint-config": "0.0.0",
     "@teamvortexsoftware/typescript-config": "0.0.0"
   },
   "dependencies": {
+    "@teamvortexsoftware/vortex-core": "file://../vortex-core",
+    "expo-random": "^14.0.1",
+    "expo-standard-web-crypto": "^2.1.4",
     "react": "18.3.1",
     "react-native": "0.76.9",
     "react-native-vector-icons": "^10.2.0",
-    "@teamvortexsoftware/vortex-core": "0.0.1"
+    "uuid": "11.0.5"
   },
   "peerDependencies": {
     "react": "*",

package/src/hooks/useVortexInvite.ts

@@ -1,11 +1,12 @@
-import { WidgetConfiguration } from "@teamvortexsoftware/vortex-core";
-import { useEffect, useMemo, useState } from "react";
-import { Animated, Share, Clipboard } from "react-native";
-import VortexClient from "../shared/api";
-import { extractFeatureFlags, extractThemeColors } from "../utils/themeUtils";
-import { useThemeStyles } from "./useThemeStyles";
+import { WidgetConfiguration } from '@teamvortexsoftware/vortex-core';
+import { useEffect, useMemo, useState } from 'react';
+import { Animated, Share, Clipboard } from 'react-native';
+import VortexClient from '../shared/api';
+import { extractFeatureFlags, extractThemeColors } from '../utils/themeUtils';
+import { useThemeStyles } from './useThemeStyles';
+import { Attributes } from '../vortexInvite';
 
-export type VortexActionType = "invite" | "share" | string;
+export type VortexActionType = 'invite' | 'share' | string;
 
 export interface VortexActionResult {
   type: VortexActionType;
@@ -31,25 +32,17 @@ export function useVortexInvite({
   onSuccess,
   onError,
 }: UseVortexInviteOptions) {
-  const vortexClient = useMemo(
-    () => new VortexClient(vortexApiHost),
-    [vortexApiHost],
-  );
+  const vortexClient = useMemo(() => new VortexClient(vortexApiHost), [vortexApiHost]);
 
-  const [widgetConfiguration, setWidgetConfiguration] = useState<
-    WidgetConfiguration | undefined
-  >();
+  const [widgetConfiguration, setWidgetConfiguration] = useState<WidgetConfiguration | undefined>();
   const [error, setError] = useState<{ message: string } | null>(null);
   const [fetching, setFetching] = useState(isLoading);
   const [loading, setLoading] = useState(true);
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
   const opacity = new Animated.Value(0.3);
 
   // Extract theme colors and feature flags using utility functions
-  const themeColors = useMemo(
-    () => extractThemeColors(widgetConfiguration),
-    [widgetConfiguration],
-  );
+  const themeColors = useMemo(() => extractThemeColors(widgetConfiguration), [widgetConfiguration]);
 
   // Get theme styles based on theme colors
   const themeStyles = useThemeStyles(themeColors);
@@ -60,14 +53,14 @@ export function useVortexInvite({
 
   const has = useMemo(() => {
     const flags = extractFeatureFlags(widgetConfiguration);
-    console.log("[Vortex] Invite has", flags);
+    console.log('[Vortex] Invite has', flags);
     return flags;
   }, [widgetConfiguration]);
 
   // Log the host only once when the hook mounts
   useEffect(() => {
-    if (vortexApiHost.indexOf("localhost") > -1) {
-      console.warn("[Vortex] Invite Using localhost as host");
+    if (vortexApiHost.indexOf('localhost') > -1) {
+      console.warn('[Vortex] Invite Using localhost as host');
     }
   }, [vortexApiHost]);
 
@@ -85,7 +78,7 @@ export function useVortexInvite({
           duration: 1000,
           useNativeDriver: false,
         }),
-      ]),
+      ])
     );
     animation.start();
 
@@ -99,54 +92,48 @@ export function useVortexInvite({
   useEffect(() => {
     // Case: If `widgetConfiguration` is already set, do nothing
     if (widgetConfiguration) {
-      console.log(
-        "[Vortex] Invite Already has widgetConfiguration, skipping fetch",
-      );
+      console.log('[Vortex] Invite Already has widgetConfiguration, skipping fetch');
       return;
     }
     if (!jwt) {
-      console.log("[Vortex] Invite JWT is required");
+      console.log('[Vortex] Invite JWT is required');
       return;
     }
 
     const fetchData = async () => {
-      console.log("[Vortex] Invite Fetching Data...");
+      console.log('[Vortex] Invite Fetching Data...');
       setFetching(true);
       setLoading(true);
       setError(null);
 
       try {
-        const result = await vortexClient.getWidgetConfiguration(
-          widgetId,
-          jwt,
-          environmentId,
-        );
+        const result = await vortexClient.getWidgetConfiguration(widgetId, jwt, environmentId);
         if (result?.data?.widgetConfiguration) {
           setWidgetConfiguration(result.data.widgetConfiguration);
           console.log(
-            "[Vortex] Invite Successfully fetched widgetConfiguration",
-            JSON.stringify(result.data.widgetConfiguration),
+            '[Vortex] Invite Successfully fetched widgetConfiguration',
+            JSON.stringify(result.data.widgetConfiguration)
           );
         } else {
-          const error = result?.error || "No configuration data found.";
+          const error = result?.error || 'No configuration data found.';
           console.error(`[Vortex] Invite ${error}`);
           throw new Error(error);
         }
       } catch (err) {
         if (err instanceof Error) {
           const fetchError = err as any;
-          console.error("[Vortex] Invite Error Details:", {
+          console.error('[Vortex] Invite Error Details:', {
             message: fetchError.message,
-            status: fetchError.status || "unknown",
+            status: fetchError.status || 'unknown',
             statusText: fetchError.statusText,
             body: fetchError.body,
             stack: fetchError.stack,
           });
         }
 
-        console.error("[Vortex] Invite Error", err);
+        console.error('[Vortex] Invite Error', err);
         setError({
-          message: (err as Error).message || "Something went wrong!",
+          message: (err as Error).message || 'Something went wrong!',
         });
       } finally {
         setFetching(false);
@@ -157,30 +144,34 @@ export function useVortexInvite({
     fetchData();
   }, [widgetId, jwt, environmentId]);
 
-  const handleInviteClick = async () => {
+  const handleInviteClick = async (sessionId: string, contentTokens?: Attributes) => {
     try {
       if (!widgetConfiguration?.id) {
-        console.log("[Vortex Invite] Widget configuration ID is required");
+        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", {
+      console.log('[Vortex] Invite Sending invitation', {
         email,
         widgetId,
         environmentId,
       });
       if (!jwt) {
-        throw new Error("[Vortex Invite] JWT is required");
+        throw new Error('[Vortex Invite] JWT is required');
       }
+      const payload = {
+        ...contentTokens,
+        email: {
+          value: email,
+          type: 'email',
+        },
+      };
       const body = await vortexClient.createInvite(
         jwt,
         widgetConfiguration?.id,
         environmentId,
-        {
-          email: {
-            value: email,
-          },
-        },
+        sessionId,
+        payload
       );
       // const response = await fetch(url, {
       //   method: "POST",
@@ -197,20 +188,17 @@ export function useVortexInvite({
       //   return;
       // }
       // const body = await response.json();
-      console.log("[Vortex] Invite Response", body);
+      console.log('[Vortex] Invite Response', body);
       if (onSuccess) {
         onSuccess({
-          type: "invite",
-          data: "Email invite sent",
+          type: 'invite',
+          data: 'Email invite sent',
         });
       }
     } catch (error) {
-      console.error("[Vortex]", error);
+      console.error('[Vortex]', error);
       if (onError) {
-        onError(
-          error instanceof Error ? error : new Error(String(error)),
-          "invite",
-        );
+        onError(error instanceof Error ? error : new Error(String(error)), 'invite');
       }
     }
   };
@@ -227,26 +215,23 @@ export function useVortexInvite({
     try {
       const shareableLink = getShareableLink();
       if (!shareableLink) {
-        throw new Error("No shareable link available");
+        throw new Error('No shareable link available');
       }
       await Share.share({
         message: shareableLink,
-        title: "Share Invite Link",
+        title: 'Share Invite Link',
       });
-      console.log("[Vortex] Link Shared", "The invite link has been shared.");
+      console.log('[Vortex] Link Shared', 'The invite link has been shared.');
       if (onSuccess) {
         onSuccess({
-          type: "share",
-          data: "Sharable link used",
+          type: 'share',
+          data: 'Sharable link used',
         });
       }
     } catch (error) {
-      console.error("[Vortex] Failed to share link:", error);
+      console.error('[Vortex] Failed to share link:', error);
       if (onError) {
-        onError(
-          error instanceof Error ? error : new Error(String(error)),
-          "share",
-        );
+        onError(error instanceof Error ? error : new Error(String(error)), 'share');
       }
     }
   };
@@ -255,26 +240,20 @@ export function useVortexInvite({
     try {
       const shareableLink = getShareableLink();
       if (!shareableLink) {
-        throw new Error("No shareable link available");
+        throw new Error('No shareable link available');
       }
       await Clipboard.setString(shareableLink);
-      console.log(
-        "[Vortex] Link Copied to clipboard",
-        "The invite link has been copied.",
-      );
+      console.log('[Vortex] Link Copied to clipboard', 'The invite link has been copied.');
       if (onSuccess) {
         onSuccess({
-          type: "share",
-          data: "Sharable copied",
+          type: 'share',
+          data: 'Sharable copied',
         });
       }
     } catch (error) {
-      console.error("[Vortex] Failed to copy link:", error);
+      console.error('[Vortex] Failed to copy link:', error);
       if (onError) {
-        onError(
-          error instanceof Error ? error : new Error(String(error)),
-          "share",
-        );
+        onError(error instanceof Error ? error : new Error(String(error)), 'share');
       }
     }
   };

package/src/index.tsx

@@ -1,2 +1,2 @@
-export { VortexInvite, type VortexInviteProps } from "./vortexInvite";
-export { type VortexActionResult, type VortexActionType } from "./hooks/useVortexInvite";
+export { VortexInvite, type VortexInviteProps, type Attributes } from './vortexInvite';
+export { type VortexActionResult, type VortexActionType } from './hooks/useVortexInvite';

package/src/shared/api.ts

@@ -3,31 +3,25 @@ class VortexClient {
 
   constructor(baseUrl: string) {
     // trim ending /
-    this.baseUrl = baseUrl.replace(/\/+$/, "");
+    this.baseUrl = baseUrl.replace(/\/+$/, '');
   }
 
-  async getWidgetConfiguration(
-    widgetId: string,
-    jwt: string,
-    environmentId: string,
-  ) {
+  async getWidgetConfiguration(widgetId: string, jwt: string, environmentId: string) {
     const url = `${this.baseUrl}/api/v1/environment/${environmentId}/widgets/${widgetId}`;
-    console.log("[VortexClient] getWidgetConfiguration", { url });
-    
+    console.log('[VortexClient] getWidgetConfiguration', { url });
+
     const response = await fetch(url, {
       headers: { Authorization: `Bearer ${jwt}` },
     });
 
     if (!response.ok) {
       const body = await response.text();
-      console.error("[VortexClient] getWidgetConfiguration", { status: response.status, body });
-      throw new Error(
-        `Error fetching widget configuration from ${url}: ${response.status}`,
-      );
+      console.error('[VortexClient] getWidgetConfiguration', { status: response.status, body });
+      throw new Error(`Error fetching widget configuration from ${url}: ${response.status}`);
     }
 
     const data = await response.json();
-    console.log("[VortexClient] getWidgetConfiguration", { data });
+    console.log('[VortexClient] getWidgetConfiguration', { data });
     return data;
   }
 
@@ -35,33 +29,33 @@ class VortexClient {
     jwt: string,
     widgetConfigurationId: string,
     environmentId: string,
-    payload: any,
+    sessionId: string,
+    payload: any
   ) {
-
-
     const response = await fetch(
       `${this.baseUrl}/api/v1/environment/${environmentId}/widget-configuration/${widgetConfigurationId}/invite`,
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
           Authorization: `Bearer ${jwt}`,
+          'x-session-id': sessionId,
         },
         body: JSON.stringify({
           data: {
             payload,
           },
         }),
-      },
+      }
     );
     if (!response.ok) {
       const body = await response.text();
-      console.error("[VortexClient] createInvite", { status: response.status, body });
+      console.error('[VortexClient] createInvite', { status: response.status, body });
       throw new Error(`Error POSTing widget invite: ${response.status}`);
     }
 
     const data = await response.json();
-    console.log("[VortexClient] createInvite", data);
+    console.log('[VortexClient] createInvite', data);
     return data;
   }
 

package/src/vortexInvite.tsx

@@ -1,18 +1,17 @@
-import React from "react";
-import {
-  Animated,
-  Pressable,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from "react-native";
-import {
-  useVortexInvite,
-  VortexActionResult,
-  VortexActionType,
-} from "./hooks/useVortexInvite";
-import { ShareButtons } from "./components/ShareButtons";
+import React from 'react';
+import { Animated, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useVortexInvite, VortexActionResult, VortexActionType } from './hooks/useVortexInvite';
+import { ShareButtons } from './components/ShareButtons';
+import { polyfillWebCrypto } from 'expo-standard-web-crypto';
+import { v4 } from 'uuid';
+
+export interface Attributes {
+  [key: string]: { value: string | string[]; type: string; role?: string };
+}
+
+polyfillWebCrypto();
+// TODO from main app that uses this library
+const sessionId = v4();
 
 export interface VortexInviteProps {
   environmentId: string;
@@ -22,6 +21,7 @@ export interface VortexInviteProps {
   jwt?: string;
   onSuccess?: (result: VortexActionResult) => void;
   onError?: (error: Error, type: VortexActionType) => void;
+  contentTokens?: Attributes;
   // host: string;
   // widgetConfigurationId?: string;
   // widgetConfiguration?: WidgetConfiguration;
@@ -38,6 +38,7 @@ export function VortexInvite({
   jwt,
   onSuccess,
   onError,
+  contentTokens,
 }: VortexInviteProps) {
   const {
     error,
@@ -77,9 +78,7 @@ export function VortexInvite({
     <View style={[styles.container, themeStyles.containerStyles]}>
       {has?.emailInvitations && (
         <View style={styles.inviteContainer}>
-          <Text style={[styles.introText, themeStyles.textStyles]}>
-            Invite People
-          </Text>
+          <Text style={[styles.introText, themeStyles.textStyles]}>Invite People</Text>
           <TextInput
             style={[styles.input, themeStyles.inputStyles]}
             placeholder="Enter email"
@@ -91,13 +90,9 @@ export function VortexInvite({
           <View style={styles.buttonContainer}>
             <Pressable
               style={[styles.submitButton, themeStyles.primaryButton]}
-              onPress={handleInviteClick}
+              onPress={() => handleInviteClick(sessionId, contentTokens)}
             >
-              <Text
-                style={[styles.submitButtonText, themeStyles.primaryButtonText]}
-              >
-                Invite
-              </Text>
+              <Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>Invite</Text>
             </Pressable>
           </View>
         </View>
@@ -128,26 +123,26 @@ export function VortexInvite({
 const styles = StyleSheet.create({
   container: {
     padding: 15,
-    display: "flex",
-    flexDirection: "column",
+    display: 'flex',
+    flexDirection: 'column',
     borderRadius: 8,
     borderWidth: 1,
   },
   inviteContainer: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
     marginTop: 8,
   },
   introText: {
     marginBottom: 8,
     fontSize: 24,
-    fontWeight: "bold",
-    textAlign: "center",
+    fontWeight: 'bold',
+    textAlign: 'center',
   },
   input: {
-    width: "100%",
+    width: '100%',
     borderWidth: 1,
     padding: 10,
     borderRadius: 5,
@@ -156,38 +151,38 @@ const styles = StyleSheet.create({
   buttonContainer: {
     marginTop: 16,
     marginBottom: 8,
-    width: "100%",
+    width: '100%',
   },
   submitButton: {
     padding: 12,
     borderRadius: 5,
-    alignItems: "center",
+    alignItems: 'center',
     borderWidth: 1,
   },
   submitButtonText: {
-    fontWeight: "500",
-    textTransform: "none",
+    fontWeight: '500',
+    textTransform: 'none',
   },
   skeleton: {
-    width: "100%",
+    width: '100%',
     height: 50,
-    backgroundColor: "#e0e0e0",
+    backgroundColor: '#e0e0e0',
     borderRadius: 5,
   },
   shareContainer: {
     marginTop: 16,
-    alignItems: "center",
+    alignItems: 'center',
   },
   divider: {
     marginVertical: 10,
     fontSize: 16,
-    fontWeight: "bold",
-    textAlign: "center",
+    fontWeight: 'bold',
+    textAlign: 'center',
   },
   shareButtonsContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "center",
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
   },
   // Share button styles moved to ShareButtons.tsx
 });