@teamvortexsoftware/vortex-react-native 0.0.8 → 0.0.10

package/src/hooks/useVortexInvite.ts

@@ -1,278 +0,0 @@
-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 interface VortexActionResult {
-  type: VortexActionType;
-  data: string;
-}
-
-export interface UseVortexInviteOptions {
-  widgetId: string;
-  environmentId: string;
-  vortexApiHost: string;
-  isLoading?: boolean;
-  jwt?: string;
-  onSuccess?: (result: VortexActionResult) => void;
-  onError?: (error: Error, type: VortexActionType) => void;
-}
-
-export function useVortexInvite({
-  widgetId,
-  environmentId,
-  vortexApiHost,
-  isLoading = false,
-  jwt,
-  onSuccess,
-  onError,
-}: UseVortexInviteOptions) {
-  const vortexClient = useMemo(() => new VortexClient(vortexApiHost), [vortexApiHost]);
-
-  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 opacity = new Animated.Value(0.3);
-
-  // Extract theme colors and feature flags using utility functions
-  const themeColors = useMemo(() => extractThemeColors(widgetConfiguration), [widgetConfiguration]);
-
-  // Get theme styles based on theme colors
-  const themeStyles = useThemeStyles(themeColors);
-
-  const options = useMemo(() => {
-    return widgetConfiguration?.configuration?.props || {};
-  }, [widgetConfiguration]);
-
-  const has = useMemo(() => {
-    const flags = extractFeatureFlags(widgetConfiguration);
-    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');
-    }
-  }, [vortexApiHost]);
-
-  // Loading animation effect
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 1000,
-          useNativeDriver: false,
-        }),
-        Animated.timing(opacity, {
-          toValue: 0.3,
-          duration: 1000,
-          useNativeDriver: false,
-        }),
-      ])
-    );
-    animation.start();
-
-    setTimeout(() => {
-      setLoading(false);
-      animation.stop();
-    }, 2000);
-  }, []);
-
-  // Fetch widget configuration if needed
-  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 = async () => {
-      console.log('[Vortex] Invite Fetching Data...');
-      setFetching(true);
-      setLoading(true);
-      setError(null);
-
-      try {
-        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)
-          );
-        } else {
-          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:', {
-            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 as Error).message || 'Something went wrong!',
-        });
-      } finally {
-        setFetching(false);
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [widgetId, jwt, environmentId]);
-
-  const handleInviteClick = async (sessionId: string, contentTokens?: Attributes) => {
-    try {
-      if (!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 = {
-        ...contentTokens,
-        email: {
-          value: email,
-          type: 'email',
-        },
-      };
-      const body = await vortexClient.createInvite(
-        jwt,
-        widgetConfiguration?.id,
-        environmentId,
-        sessionId,
-        payload
-      );
-      // const response = await fetch(url, {
-      //   method: "POST",
-      //   headers: {
-      //     "Content-Type": "application/json",
-      //   },
-      //   body: JSON.stringify({ to: [{ email }] }),
-      // });
-      // if (!response.ok) {
-      //   const body = await response.json();
-      //   console.error("[Vortex] Invite Error", body);
-      //   const error = body?.message || body?.error || "Something went wrong!";
-      //   onError?.(new Error(error), "invite");
-      //   return;
-      // }
-      // const body = await response.json();
-      console.log('[Vortex] Invite Response', body);
-      if (onSuccess) {
-        onSuccess({
-          type: 'invite',
-          data: 'Email invite sent',
-        });
-      }
-    } catch (error) {
-      console.error('[Vortex]', error);
-      if (onError) {
-        onError(error instanceof Error ? error : new Error(String(error)), 'invite');
-      }
-    }
-  };
-
-  const getShareableLink = (): string | undefined => {
-    const result =
-      widgetConfiguration?.slug != null
-        ? vortexClient.getShareableLinkFormatted(widgetConfiguration.slug)
-        : undefined;
-    return result;
-  };
-
-  const handleShareLink = async () => {
-    try {
-      const shareableLink = getShareableLink();
-      if (!shareableLink) {
-        throw new Error('No shareable link available');
-      }
-      await Share.share({
-        message: shareableLink,
-        title: 'Share Invite Link',
-      });
-      console.log('[Vortex] Link Shared', '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 = async () => {
-    try {
-      const shareableLink = getShareableLink();
-      if (!shareableLink) {
-        throw new Error('No shareable link available');
-      }
-      await Clipboard.setString(shareableLink);
-      console.log('[Vortex] Link Copied to clipboard', '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,
-    handleInviteClick,
-    handleShareLink,
-    handleCopyLink,
-    getShareableLink,
-  };
-}

package/src/index.tsx

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

package/src/shared/api.ts

@@ -1,67 +0,0 @@
-class VortexClient {
-  private baseUrl: string;
-
-  constructor(baseUrl: string) {
-    // trim ending /
-    this.baseUrl = baseUrl.replace(/\/+$/, '');
-  }
-
-  async getWidgetConfiguration(widgetId: string, jwt: string, environmentId: string) {
-    const url = `${this.baseUrl}/api/v1/environment/${environmentId}/widgets/${widgetId}`;
-    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}`);
-    }
-
-    const data = await response.json();
-    console.log('[VortexClient] getWidgetConfiguration', { data });
-    return data;
-  }
-
-  async createInvite(
-    jwt: string,
-    widgetConfigurationId: string,
-    environmentId: string,
-    sessionId: string,
-    payload: any
-  ) {
-    const response = await fetch(
-      `${this.baseUrl}/api/v1/environment/${environmentId}/widget-configuration/${widgetConfigurationId}/invite`,
-      {
-        method: 'POST',
-        headers: {
-          '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 });
-      throw new Error(`Error POSTing widget invite: ${response.status}`);
-    }
-
-    const data = await response.json();
-    console.log('[VortexClient] createInvite', data);
-    return data;
-  }
-
-  getShareableLinkFormatted(slug: string) {
-    return `${this.baseUrl}/api/v1/no-auth/components/share/${slug}`;
-  }
-}
-
-export default VortexClient;

package/src/utils/themeUtils.ts

@@ -1,85 +0,0 @@
-import { WidgetConfiguration } from "@teamvortexsoftware/vortex-core";
-
-export interface ThemeColors {
-  containerBackground: string;
-  containerForeground: string;
-  containerBorder: string;
-  primaryButtonBackground: string;
-  primaryButtonForeground: string;
-  primaryButtonBorder: string;
-  secondaryButtonBackground: string;
-  secondaryButtonForeground: string;
-  secondaryButtonBorder: string;
-}
-
-export interface FeatureFlags {
-  shareableLinks: boolean;
-  emailInvitations: boolean;
-  shareOptionsCopyLink: boolean;
-  shareOptionsSms: boolean;
-  shareOptionsFacebookMessenger: boolean;
-  shareOptionsInstagramDms: boolean;
-  shareOptionsLinkedInMessaging: boolean;
-  shareOptionsTwitterDms: boolean;
-  shareOptionsWhatsApp: boolean;
-  shareOptionsNativeShareSheet: boolean;
-  shareOptionsQrCode: boolean;
-}
-
-/**
- * Extracts theme colors from widget configuration
- */
-export function extractThemeColors(widgetConfiguration?: WidgetConfiguration): ThemeColors {
-  const options = widgetConfiguration?.configuration?.props;
-  const colors = options?.["vortex.theme.colors"]?.value || [];
-  const colorMap: Record<string, string> = {};
-  
-  colors.forEach((color: any) => {
-    if (color.key && color.value) {
-      colorMap[color.key] = color.value;
-    }
-  });
-  
-  return {
-    containerBackground: colorMap["--container-background"] || "#ffffff",
-    containerForeground: colorMap["--container-foreground-color"] || "#666666",
-    containerBorder: colorMap["--container-border-color"] || "#c4c4c4",
-    primaryButtonBackground: colorMap["--primary-button-background"] || "#197af3",
-    primaryButtonForeground: colorMap["--primary-button-foreground-color"] || "#ffffff",
-    primaryButtonBorder: colorMap["--primary-button-border-color"] || "#000000",
-    secondaryButtonBackground: colorMap["--secondary-button-background"] || "#dfdfdf",
-    secondaryButtonForeground: colorMap["--secondary-button-foreground-color"] || "#000000",
-    secondaryButtonBorder: colorMap["--secondary-button-border-color"] || "#c4c4c4",
-  };
-}
-
-/**
- * Extracts feature flags from widget configuration
- */
-export function extractFeatureFlags(widgetConfiguration?: WidgetConfiguration): FeatureFlags {
-  const features: string[] = Array.isArray(
-    widgetConfiguration?.configuration?.props?.["vortex.components"]?.value,
-  )
-    ? widgetConfiguration?.configuration?.props?.["vortex.components"]?.value
-    : [];
-
-  const shareOptions: string[] = Array.isArray(
-    widgetConfiguration?.configuration?.props?.["vortex.components.share.options"]?.value,
-  )
-    ? widgetConfiguration?.configuration?.props?.["vortex.components.share.options"]?.value
-    : [];
-    
-  return {
-    shareableLinks: features.includes("vortex.components.emailinvitations"),
-    emailInvitations: features.includes("vortex.components.share"),
-    shareOptionsCopyLink: shareOptions.includes("copyLink"),
-    shareOptionsFacebookMessenger: shareOptions.includes("facebookMessenger"),
-    shareOptionsInstagramDms: shareOptions.includes("instagramDms"),
-    shareOptionsLinkedInMessaging: shareOptions.includes("linkedInMessaging"),
-    shareOptionsNativeShareSheet: shareOptions.includes("nativeShareSheet"),
-    shareOptionsQrCode: shareOptions.includes("qrCode"),
-    shareOptionsSms: shareOptions.includes("sms"),
-    shareOptionsTwitterDms: shareOptions.includes("twitterDms"),
-    shareOptionsWhatsApp: shareOptions.includes("whatsApp"),
-  };
-}

package/src/vortexInvite.tsx

@@ -1,188 +0,0 @@
-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;
-  widgetId: string;
-  vortexApiHost: string;
-  isLoading: boolean;
-  jwt?: string;
-  onSuccess?: (result: VortexActionResult) => void;
-  onError?: (error: Error, type: VortexActionType) => void;
-  contentTokens?: Attributes;
-  // host: string;
-  // widgetConfigurationId?: string;
-  // widgetConfiguration?: WidgetConfiguration;
-  // isLoading?: boolean;
-  // onSuccess?: (result: VortexActionResult) => void;
-  // onError?: (error: Error, type: VortexActionType) => void;
-}
-
-export function VortexInvite({
-  widgetId,
-  environmentId,
-  vortexApiHost,
-  isLoading = false,
-  jwt,
-  onSuccess,
-  onError,
-  contentTokens,
-}: VortexInviteProps) {
-  const {
-    error,
-    fetching,
-    loading,
-    email,
-    setEmail,
-    opacity,
-    themeColors,
-    themeStyles,
-    has,
-    handleInviteClick,
-    handleShareLink,
-    handleCopyLink,
-    getShareableLink,
-  } = useVortexInvite({
-    widgetId,
-    environmentId,
-    vortexApiHost,
-    isLoading,
-    jwt,
-    onSuccess,
-    onError,
-  });
-
-  if (error?.message) {
-    return <Text data-testid="error">{error.message}</Text>;
-  }
-
-  if (fetching || loading) {
-    return <Animated.View style={[styles.skeleton, { opacity }]} />;
-  }
-
-  // Theme styles are now provided by the hook
-
-  return (
-    <View style={[styles.container, themeStyles.containerStyles]}>
-      {has?.emailInvitations && (
-        <View style={styles.inviteContainer}>
-          <Text style={[styles.introText, themeStyles.textStyles]}>Invite People</Text>
-          <TextInput
-            style={[styles.input, themeStyles.inputStyles]}
-            placeholder="Enter email"
-            placeholderTextColor={themeColors.containerForeground}
-            value={email}
-            onChangeText={setEmail}
-            autoCapitalize="none"
-          />
-          <View style={styles.buttonContainer}>
-            <Pressable
-              style={[styles.submitButton, themeStyles.primaryButton]}
-              onPress={() => handleInviteClick(sessionId, contentTokens)}
-            >
-              <Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>Invite</Text>
-            </Pressable>
-          </View>
-        </View>
-      )}
-
-      {has?.shareableLinks && (
-        <View style={styles.shareContainer}>
-          {has?.emailInvitations && (
-            <Text style={[styles.divider, themeStyles.textStyles]}>OR</Text>
-          )}
-
-          <View style={styles.shareButtonsContainer}>
-            <ShareButtons
-              has={has}
-              themeColors={themeColors}
-              themeStyles={themeStyles}
-              handleShareLink={handleShareLink}
-              handleCopyLink={handleCopyLink}
-              shareableLink={getShareableLink()}
-            />
-          </View>
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 15,
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-  inviteContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  introText: {
-    marginBottom: 8,
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  input: {
-    width: '100%',
-    borderWidth: 1,
-    padding: 10,
-    borderRadius: 5,
-    marginBottom: 8,
-  },
-  buttonContainer: {
-    marginTop: 16,
-    marginBottom: 8,
-    width: '100%',
-  },
-  submitButton: {
-    padding: 12,
-    borderRadius: 5,
-    alignItems: 'center',
-    borderWidth: 1,
-  },
-  submitButtonText: {
-    fontWeight: '500',
-    textTransform: 'none',
-  },
-  skeleton: {
-    width: '100%',
-    height: 50,
-    backgroundColor: '#e0e0e0',
-    borderRadius: 5,
-  },
-  shareContainer: {
-    marginTop: 16,
-    alignItems: 'center',
-  },
-  divider: {
-    marginVertical: 10,
-    fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  shareButtonsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-  },
-  // Share button styles moved to ShareButtons.tsx
-});

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@teamvortexsoftware/typescript-config/react-native-library",
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"],
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "declaration": true,
-    "declarationDir": "dist/types",
-    "emitDeclarationOnly": false,
-    "moduleResolution": "node",
-    "module": "CommonJS",
-    "jsx": "react-native",
-    "strict": true
-  }
-}