@teamvortexsoftware/vortex-react-native 0.0.8 → 0.0.10

package/dist/utils/themeUtils.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractThemeColors = extractThemeColors;
+exports.extractFeatureFlags = extractFeatureFlags;
+/**
+ * Extracts theme colors from widget configuration
+ */
+function extractThemeColors(widgetConfiguration) {
+    var _a, _b;
+    const options = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props;
+    const colors = ((_b = options === null || options === void 0 ? void 0 : options['vortex.theme.colors']) === null || _b === void 0 ? void 0 : _b.value) || [];
+    const colorMap = {};
+    colors.forEach((color) => {
+        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
+ */
+function extractFeatureFlags(widgetConfiguration) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const features = Array.isArray((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components']) === null || _c === void 0 ? void 0 : _c.value)
+        ? (_f = (_e = (_d = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e['vortex.components']) === null || _f === void 0 ? void 0 : _f.value
+        : [];
+    const shareOptions = Array.isArray((_j = (_h = (_g = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h['vortex.components.share.options']) === null || _j === void 0 ? void 0 : _j.value)
+        ? (_m = (_l = (_k = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _k === void 0 ? void 0 : _k.props) === null || _l === void 0 ? void 0 : _l['vortex.components.share.options']) === null || _m === void 0 ? void 0 : _m.value
+        : [];
+    return {
+        shareableLinks: features.includes("vortex.components.emailinvitations"),
+        emailInvitations: features.includes("vortex.components.share"),
+        shareEnabled: 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"), // Only true if specifically included
+        shareOptionsSms: shareOptions.includes("sms"),
+        shareOptionsTwitterDms: shareOptions.includes("twitterDms"),
+        shareOptionsWhatsApp: shareOptions.includes("whatsApp"),
+    };
+}

package/dist/vortexInvite.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VortexInvite = VortexInvite;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const useVortexInvite_1 = require("./hooks/useVortexInvite");
+const ShareButtons_1 = require("./components/ShareButtons");
+function VortexInvite({ widgetId, environmentId, vortexApiHost, isLoading = false, jwt, onSuccess, onError, contentTokens, }) {
+    const { error, fetching, loading, email, setEmail, opacity, themeColors, themeStyles, has, inviteLoading, showSuccessMessage, handleInviteClick, handleShareLink, handleCopyLink, getShareableLink, formLayout, } = (0, useVortexInvite_1.useVortexInvite)({
+        widgetId,
+        environmentId,
+        vortexApiHost,
+        isLoading,
+        jwt,
+        onSuccess,
+        onError,
+    });
+    if (error === null || error === void 0 ? void 0 : error.message) {
+        return <react_native_1.Text data-testid="error">{error.message}</react_native_1.Text>;
+    }
+    if (fetching || loading) {
+        return <react_native_1.Animated.View style={[styles.skeleton, { opacity }]}/>;
+    }
+    // Theme styles are now provided by the hook
+    // If we have a grid layout with separate columns for email and share, we'll use that layout
+    if ((formLayout === null || formLayout === void 0 ? void 0 : formLayout.isGridLayout) && (formLayout === null || formLayout === void 0 ? void 0 : formLayout.hasSeparateColumns)) {
+        return (<react_native_1.View style={[styles.container, themeStyles.containerStyles]}>
+        <react_native_1.View style={styles.gridContainer}>
+          {/* Email invitation column */}
+          {(has === null || has === void 0 ? void 0 : has.emailInvitations) && (<react_native_1.View style={styles.gridItem}>
+              <react_native_1.Text style={[styles.introText, themeStyles.textStyles]}>Invite People</react_native_1.Text>
+              <react_native_1.TextInput style={[styles.input, themeStyles.inputStyles]} placeholder={formLayout.emailPlaceholder} placeholderTextColor={themeColors.containerForeground} value={email} onChangeText={setEmail} autoCapitalize="none"/>
+              <react_native_1.View style={styles.buttonContainer}>
+                <react_native_1.Pressable style={[styles.submitButton, themeStyles.primaryButton, inviteLoading && styles.disabledButton]} onPress={() => handleInviteClick(contentTokens)} disabled={inviteLoading}>
+                  {inviteLoading ? (<react_native_1.ActivityIndicator size="small" color={themeColors.containerBackground}/>) : (<react_native_1.Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>
+                      {formLayout.submitButtonLabel}
+                    </react_native_1.Text>)}
+                </react_native_1.Pressable>
+                {showSuccessMessage && (<react_native_1.View style={styles.successMessageContainer}>
+                    <react_native_1.Text style={styles.successMessage}>Success!</react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+            </react_native_1.View>)}
+
+          {/* Share buttons column */}
+          {(has === null || has === void 0 ? void 0 : has.shareableLinks) && (<react_native_1.View style={styles.gridItem}>
+              <react_native_1.View style={styles.shareButtonsContainer}>
+                <ShareButtons_1.ShareButtons has={has} themeColors={themeColors} themeStyles={themeStyles} handleShareLink={handleShareLink} handleCopyLink={handleCopyLink} shareableLink={getShareableLink()}/>
+              </react_native_1.View>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>);
+    }
+    // Default stacked layout
+    return (<react_native_1.View style={[styles.container, themeStyles.containerStyles]}>
+      {(has === null || has === void 0 ? void 0 : has.emailInvitations) && (<react_native_1.View style={styles.inviteContainer}>
+          <react_native_1.Text style={[styles.introText, themeStyles.textStyles]}>Invite People</react_native_1.Text>
+          <react_native_1.TextInput style={[styles.input, themeStyles.inputStyles]} placeholder={(formLayout === null || formLayout === void 0 ? void 0 : formLayout.emailPlaceholder) || 'Enter email'} placeholderTextColor={themeColors.containerForeground} value={email} onChangeText={setEmail} autoCapitalize="none"/>
+          <react_native_1.View style={styles.buttonContainer}>
+            <react_native_1.Pressable style={[styles.submitButton, themeStyles.primaryButton, inviteLoading && styles.disabledButton]} onPress={() => handleInviteClick(contentTokens)} disabled={inviteLoading}>
+              {inviteLoading ? (<react_native_1.ActivityIndicator size="small" color={themeColors.containerBackground}/>) : (<react_native_1.Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>
+                  {(formLayout === null || formLayout === void 0 ? void 0 : formLayout.submitButtonLabel) || 'Invite'}
+                </react_native_1.Text>)}
+            </react_native_1.Pressable>
+            {showSuccessMessage && (<react_native_1.View style={styles.successMessageContainer}>
+                <react_native_1.Text style={styles.successMessage}>Success!</react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {(has === null || has === void 0 ? void 0 : has.shareableLinks) && (<react_native_1.View style={styles.shareContainer}>
+          {(has === null || has === void 0 ? void 0 : has.emailInvitations) && <react_native_1.Text style={[styles.divider, themeStyles.textStyles]}>OR</react_native_1.Text>}
+
+          <react_native_1.View style={styles.shareButtonsContainer}>
+            <ShareButtons_1.ShareButtons has={has} themeColors={themeColors} themeStyles={themeStyles} handleShareLink={handleShareLink} handleCopyLink={handleCopyLink} shareableLink={getShareableLink()}/>
+          </react_native_1.View>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 15,
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 8,
+        borderWidth: 1,
+    },
+    gridContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    gridItem: {
+        flex: 1,
+        padding: 8,
+        minWidth: 250, // Ensure items have minimum width for smaller screens
+    },
+    disabledButton: {
+        opacity: 0.7,
+    },
+    successMessageContainer: {
+        marginTop: 8,
+        padding: 8,
+        alignItems: 'center',
+        width: '100%',
+    },
+    successMessage: {
+        color: 'green',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+    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: 'lightgray',
+        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/package.json

@@ -2,10 +2,11 @@
   "name": "@teamvortexsoftware/vortex-react-native",
   "description": "",
   "author": "@teamvortexsoftware",
-  "version": "0.0.8",
-  "main": ".plugin/withVortexReactNative.js",
+  "version": "0.0.10",
+  "files": [
+    "dist"
+  ],
   "exports": {
-    ".": "./plugin.js",
     "./runtime": "./dist/index.js"
   },
   "expo": {
@@ -13,7 +14,8 @@
       "@teamvortexsoftware/vortex-react-native"
     ]
   },
-  "react-native": "src/index.tsx",
+  "types": "dist/types/index.d.ts",
+  "react-native": "dist/index.js",
   "devDependencies": {
     "@eslint/js": "^9.24.0",
     "@expo/config-plugins": "^10.0.2",

package/eslint.config.mjs

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

package/plugin/withVortexReactNative.js

@@ -1,41 +0,0 @@
-const { withInfoPlist } = require('@expo/config-plugins');
-
-const withVortexReactNative = (config) => {
-  console.log('*** [withVortexReactNative] outer plugin running');
-
-  return withInfoPlist(config, (modConfig) => {
-    console.log('*** [withVortexReactNative] inner plugin running');
-
-    const customFonts = [
-      "AntDesign.ttf",
-      "Entypo.ttf",
-      "EvilIcons.ttf",
-      "Feather.ttf",
-      "FontAwesome.ttf",
-      "FontAwesome5_Brands.ttf",
-      "FontAwesome5_Regular.ttf",
-      "FontAwesome5_Solid.ttf",
-      "FontAwesome6_Brands.ttf",
-      "FontAwesome6_Regular.ttf",
-      "FontAwesome6_Solid.ttf",
-      "Foundation.ttf",
-      "Ionicons.ttf",
-      "MaterialIcons.ttf",
-      "MaterialCommunityIcons.ttf",
-      "SimpleLineIcons.ttf",
-      "Octicons.ttf",
-      "Zocial.ttf",
-      "Fontisto.ttf",
-    ];
-
-    const existingFonts = Array.isArray(modConfig.modResults.UIAppFonts)
-      ? modConfig.modResults.UIAppFonts
-      : [];
-
-    modConfig.modResults.UIAppFonts = Array.from(new Set([...existingFonts, ...customFonts]));
-
-    return modConfig;
-  });
-};
-
-module.exports = withVortexReactNative;

package/plugin.js

@@ -1,2 +0,0 @@
-// plugin.js
-module.exports = require('./plugin/withVortexReactNative');

package/src/components/ShareButtons.tsx

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

@@ -1,42 +0,0 @@
-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;
-}