@teamvortexsoftware/vortex-react-native 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,42 @@
+# @teamvortexsoftware/vortex-react-native
+
+React Native components for Vortex applications.
+
+## Installation
+
+```bash
+pnpm add @teamvortexsoftware/vortex-react-native
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm run build
+
+# Run type checking
+pnpm run type-check
+
+# Run linting
+pnpm run lint
+
+# Watch mode for development
+pnpm run dev
+```
+
+## Usage
+
+```tsx
+import { VortexInvite } from '@teamvortexsoftware/vortex-react-native';
+
+// Your component code here
+```
+
+## Requirements
+
+- React 18.3.1 or higher
+- React Native 0.74.5 or higher
+- pnpm 10.8.1 or higher 

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@teamvortexsoftware/eslint-config/react-native";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -2,28 +2,43 @@
   "name": "@teamvortexsoftware/vortex-react-native",
   "description": "",
   "author": "@teamvortexsoftware",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "publishConfig": {
     "access": "restricted"
   },
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "react-native": "src/index.tsx",
   "devDependencies": {
+    "@eslint/js": "^9.24.0",
     "@types/react": "18.2.14",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react-native": "^4.1.0",
     "tsup": "8.0.1",
-    "typescript": "5.5.4",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "@teamvortexsoftware/eslint-config": "0.0.0",
     "@teamvortexsoftware/typescript-config": "0.0.0"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "react-native": "0.74.5"
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-vector-icons": "^10.2.0",
+    "@teamvortexsoftware/vortex-core": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-qrcode-svg": "*",
+    "react-native-svg": "*"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "clean": "rm -rf dist"
+    "build": "echo \"no build\"",
+    "prepublish": "pnpm run build",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit"
   }
 }

package/src/components/ShareButtons.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome6";
+import { ThemeColors } from "../utils/themeUtils";
+import QRCode from "react-native-qrcode-svg";
+
+/**
+ * ShareButton component for rendering a single share option button
+ */
+interface ShareButtonProps {
+  iconName: string;
+  label: string;
+  onPress: () => void;
+  themeColors: ThemeColors;
+  themeStyles: any;
+}
+
+export function ShareButton({
+  iconName,
+  label,
+  onPress,
+  themeColors,
+  themeStyles,
+}: ShareButtonProps) {
+  return (
+    <View style={styles.shareButtonWrapper}>
+      <Pressable
+        style={[styles.shareButton, themeStyles.secondaryButton]}
+        onPress={onPress}
+      >
+        <View style={styles.buttonContentContainer}>
+          <Icon
+            name={iconName}
+            size={24}
+            color={themeColors.secondaryButtonForeground}
+          />
+          <Text
+            style={[styles.shareButtonText, themeStyles.secondaryButtonText]}
+          >
+            {label}
+          </Text>
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+/**
+ * ShareButtons component for rendering all available share options
+ */
+export interface ShareButtonsProps {
+  has: any;
+  themeColors: ThemeColors;
+  themeStyles: any;
+  handleShareLink: () => void;
+  handleCopyLink: () => void;
+  shareableLink?: string;
+}
+
+export function ShareButtons({
+  has,
+  themeColors,
+  themeStyles,
+  handleShareLink,
+  handleCopyLink,
+  shareableLink,
+}: ShareButtonsProps) {
+  const [showQRCode, setShowQRCode] = useState(false);
+  // Define button configurations
+  const buttonConfigs = [
+    {
+      key: "shareOptionsNativeShareSheet",
+      iconName: "share",
+      label: "Share",
+      onPress: handleShareLink,
+      isAvailable: has.shareOptionsNativeShareSheet,
+    },
+    {
+      key: "shareOptionsCopyLink",
+      iconName: "copy",
+      label: "Copy Link",
+      onPress: handleCopyLink,
+      isAvailable: has.shareOptionsCopyLink,
+    },
+    {
+      key: "shareOptionsQRCode",
+      iconName: "qrcode",
+      label: "QR Code",
+      onPress: () => setShowQRCode(!showQRCode),
+      isAvailable: true,
+    },
+    {
+      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 && (
+        <View style={styles.qrCodeContainer}>
+          <QRCode
+            value={shareableLink}
+            size={200}
+            color={themeColors.containerForeground}
+            backgroundColor={themeColors.containerBackground}
+          />
+        </View>
+      )}
+      {buttonConfigs
+        .filter((config) => config.isAvailable)
+        .map((config) => (
+          <ShareButton
+            key={config.key}
+            iconName={config.iconName}
+            label={config.label}
+            onPress={config.onPress}
+            themeColors={themeColors}
+            themeStyles={themeStyles}
+          />
+        ))}
+    </>
+  );
+}
+
+const styles = 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,
+  },
+});

package/src/hooks/useThemeStyles.ts

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { ThemeColors } from "../utils/themeUtils";
+
+/**
+ * Hook to generate dynamic styles based on theme colors
+ * @param themeColors The theme colors object
+ * @returns Object containing styled components based on the theme
+ */
+export function useThemeStyles(themeColors: ThemeColors) {
+  const themeStyles = 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/src/hooks/useVortexInvite.ts

@@ -0,0 +1,289 @@
+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";
+
+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.debug("[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.debug(
+        "[Vortex] Invite Already has widgetConfiguration, skipping fetch",
+      );
+      return;
+    }
+    if (!jwt) {
+      console.debug("[Vortex] Invite JWT is required");
+      return;
+    }
+
+    const fetchData = async () => {
+      console.debug("[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.debug(
+            "[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) {
+        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 () => {
+    try {
+      if (!widgetConfiguration?.id) {
+        console.debug("[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.debug("[Vortex] Invite Sending invitation", {
+        email,
+        widgetId,
+        environmentId,
+      });
+      if (!jwt) {
+        throw new Error("[Vortex Invite] JWT is required");
+      }
+      const body = await vortexClient.createInvite(
+        jwt,
+        widgetConfiguration?.id,
+        environmentId,
+        {
+          email: {
+            value: email,
+          },
+        },
+      );
+      // 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.debug("[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.debug(
+        "[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

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

package/src/shared/api.ts

@@ -0,0 +1,71 @@
+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.debug("[VortexClient] getWidgetConfiguration", { url });
+    
+    const response = await fetch(url, {
+      headers: { Authorization: `Bearer ${jwt}` },
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Error fetching widget configuration: ${response.status}`,
+      );
+    }
+
+    const data = await response.json();
+    console.debug("[VortexClient] getWidgetConfiguration", { data });
+    return data;
+  }
+
+  async createInvite(
+    jwt: string,
+    widgetConfigurationId: string,
+    environmentId: 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}`,
+        },
+        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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,193 @@
+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";
+
+export interface VortexInviteProps {
+  environmentId: string;
+  widgetId: string;
+  vortexApiHost: string;
+  isLoading: boolean;
+  jwt?: string;
+  onSuccess?: (result: VortexActionResult) => void;
+  onError?: (error: Error, type: VortexActionType) => void;
+  // 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,
+}: 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}
+            >
+              <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

@@ -0,0 +1,9 @@
+{
+  "extends": "@teamvortexsoftware/typescript-config/react-native-library",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "jsx": "react-native",
+    "strict": true
+  }
+}