@buoy-gg/shared-ui 1.7.2

package/lib/module/license/FeatureGate.js

@@ -0,0 +1,754 @@
+"use strict";
+
+/**
+ * FeatureGate - Conditionally renders content based on license status
+ *
+ * Wraps premium features and shows an upgrade prompt for free users.
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Linking, Modal } from "react-native";
+import { gameUIColors, buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { LockIcon, X, Zap, Shield, Clock, Check } from "../icons/lucide-icons.js";
+import { LicenseEntryModal } from "./LicenseEntryModal.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Simple Pro badge for marking premium features
+ */
+export const ProBadge = ({
+  style
+}) => /*#__PURE__*/_jsx(View, {
+  style: [styles.proBadge, style],
+  children: /*#__PURE__*/_jsx(Text, {
+    style: styles.proBadgeText,
+    children: "PRO"
+  })
+});
+
+/**
+ * Simple Pro upgrade modal - minimal modal with just upgrade button
+ */
+
+export const ProUpgradeModal = ({
+  visible,
+  onClose,
+  featureName = "This feature"
+}) => {
+  // Simple wrapper around UpgradeModal with minimal description and no benefits
+  return /*#__PURE__*/_jsx(UpgradeModal, {
+    visible: visible,
+    onClose: onClose,
+    featureName: featureName,
+    description: `${featureName} requires a Pro subscription.`
+  });
+};
+
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _useLicense = null;
+let _loadAttempted = false;
+function loadLicenseModule() {
+  if (_loadAttempted) return;
+  _loadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+      _useLicense = mod.useLicense ?? null;
+    }
+  } catch {
+    // License package not available - will use fallback
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+function getUseLicense() {
+  loadLicenseModule();
+  return _useLicense;
+}
+/**
+ * Default upgrade prompt shown when user doesn't have Pro access
+ * Opens LicenseEntryModal when clicked (unless custom onUpgradePress provided)
+ */
+export const UpgradePrompt = ({
+  featureName,
+  onUpgradePress,
+  compact = false
+}) => {
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+
+  // Get license hook if available
+  const useLicenseHook = getUseLicense();
+  const license = useLicenseHook?.();
+  const handlePress = useCallback(() => {
+    if (onUpgradePress) {
+      onUpgradePress();
+    } else {
+      setShowLicenseModal(true);
+    }
+  }, [onUpgradePress]);
+  const handleCloseModal = useCallback(() => {
+    setShowLicenseModal(false);
+  }, []);
+  if (compact) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.compactContainer,
+        onPress: handlePress,
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(LockIcon, {
+          size: 14,
+          color: gameUIColors.warning
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.compactText,
+          children: "PRO"
+        })]
+      }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+        visible: showLicenseModal,
+        onClose: handleCloseModal,
+        license: license
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/_jsx(LockIcon, {
+          size: 24,
+          color: gameUIColors.warning
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: "Pro Feature"
+      }), featureName && /*#__PURE__*/_jsx(Text, {
+        style: styles.featureName,
+        children: featureName
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: "Upgrade to React Buoy Pro to unlock this feature and more."
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.upgradeButton,
+        onPress: handlePress,
+        activeOpacity: 0.8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.upgradeButtonText,
+          children: "Upgrade to Pro"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      visible: showLicenseModal,
+      onClose: handleCloseModal,
+      license: license
+    })]
+  });
+};
+
+/**
+ * Wraps content that requires Pro license.
+ * Shows upgrade prompt for free users, renders children for Pro users.
+ *
+ * @example
+ * ```tsx
+ * <FeatureGate featureName="Time Travel Debugging">
+ *   <TimeTravelDebugger />
+ * </FeatureGate>
+ * ```
+ */
+export const FeatureGate = ({
+  children,
+  featureName,
+  fallback,
+  previewMode = false,
+  onUpgradePress
+}) => {
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+
+  // Pro users see the full content
+  if (isPro) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+
+  // Preview mode: show content but disabled
+  if (previewMode) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.previewContainer,
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.previewContent,
+        children: children
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.previewOverlay,
+        children: /*#__PURE__*/_jsx(UpgradePrompt, {
+          featureName: featureName,
+          onUpgradePress: onUpgradePress,
+          compact: true
+        })
+      })]
+    });
+  }
+
+  // Custom fallback
+  if (fallback) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: fallback
+    });
+  }
+
+  // Default upgrade prompt
+  return /*#__PURE__*/_jsx(UpgradePrompt, {
+    featureName: featureName,
+    onUpgradePress: onUpgradePress
+  });
+};
+
+/**
+ * Hook to check if a feature is available
+ * Returns { hasAccess, isPro, showUpgrade }
+ */
+export function useFeatureGate() {
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+  const showUpgrade = () => {
+    Linking.openURL("https://buoy.gg/pro");
+  };
+  return {
+    hasAccess: isPro,
+    isPro,
+    showUpgrade
+  };
+}
+
+/**
+ * Pro Feature Banner - Informational banner shown at the top of Pro-only views
+ * Non-blocking, just informs the user about the Pro feature benefits
+ */
+
+export const ProFeatureBanner = ({
+  featureName = "Pro Feature",
+  description,
+  benefits
+}) => {
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+
+  // Get license hook if available
+  const useLicenseHook = getUseLicense();
+  const license = useLicenseHook?.();
+  const handleUpgrade = useCallback(() => {
+    setShowLicenseModal(true);
+  }, []);
+  const handleCloseModal = useCallback(() => {
+    setShowLicenseModal(false);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.bannerContainer,
+      children: [/*#__PURE__*/_jsx(ProBadge, {
+        style: styles.bannerProBadge
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.bannerHeader,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.bannerIconContainer,
+          children: /*#__PURE__*/_jsx(Zap, {
+            size: 16,
+            color: buoyColors.primary
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.bannerTitleContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.bannerTitle,
+            children: featureName
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: styles.bannerDescription,
+            children: description
+          })]
+        })]
+      }), benefits && benefits.length > 0 && /*#__PURE__*/_jsx(View, {
+        style: styles.benefitsList,
+        children: benefits.map((benefit, index) => /*#__PURE__*/_jsxs(View, {
+          style: styles.benefitItem,
+          children: [/*#__PURE__*/_jsx(Check, {
+            size: 14,
+            color: buoyColors.success
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.benefitText,
+            children: benefit
+          })]
+        }, index))
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.bannerActions,
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.bannerUpgradeButton,
+          onPress: handleUpgrade,
+          activeOpacity: 0.8,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.bannerUpgradeButtonText,
+            children: "Upgrade to Pro"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      visible: showLicenseModal,
+      onClose: handleCloseModal,
+      license: license
+    })]
+  });
+};
+
+/**
+ * Upgrade Modal - Full-screen modal with Pro feature benefits
+ * Shown when user attempts to use a Pro feature without access
+ */
+
+export const UpgradeModal = ({
+  visible,
+  onClose,
+  featureName = "This Feature",
+  description,
+  benefits
+}) => {
+  const hasBenefits = benefits && benefits.length > 0;
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+
+  // Get license hook if available
+  const useLicenseHook = getUseLicense();
+  const license = useLicenseHook?.();
+  const handleUpgrade = useCallback(() => {
+    setShowLicenseModal(true);
+  }, []);
+  const handleCloseLicenseModal = useCallback(() => {
+    setShowLicenseModal(false);
+  }, []);
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Modal, {
+      visible: visible && !showLicenseModal,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.modalOverlay,
+        onPress: onClose,
+        activeOpacity: 1,
+        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.modalContent,
+          activeOpacity: 1,
+          onPress: () => {} // Prevent overlay dismiss when tapping content
+          ,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.modalCloseButton,
+            onPress: onClose,
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(X, {
+              size: 18,
+              color: buoyColors.textMuted
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.modalHeader,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.modalIconContainer,
+              children: /*#__PURE__*/_jsx(Zap, {
+                size: 28,
+                color: buoyColors.primary
+              })
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.modalTitle,
+              children: ["Unlock ", featureName]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.modalSubtitle,
+              children: description || "Upgrade to React Buoy Pro to access this feature and unlock the full power of your debugging toolkit."
+            })]
+          }), hasBenefits && /*#__PURE__*/_jsxs(View, {
+            style: styles.modalBenefits,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.modalBenefitsTitle,
+              children: "What you get with Pro:"
+            }), benefits.map((benefit, index) => /*#__PURE__*/_jsxs(View, {
+              style: styles.modalBenefitItem,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.modalBenefitIcon,
+                children: /*#__PURE__*/_jsx(Check, {
+                  size: 14,
+                  color: buoyColors.success
+                })
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.modalBenefitText,
+                children: benefit
+              })]
+            }, index))]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: [styles.modalFeatureRow, !hasBenefits && styles.modalFeatureRowNoBenefits],
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.modalFeatureItem,
+              children: [/*#__PURE__*/_jsx(Shield, {
+                size: 16,
+                color: buoyColors.textMuted
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.modalFeatureText,
+                children: "14-day trial"
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.modalFeatureItem,
+              children: [/*#__PURE__*/_jsx(Clock, {
+                size: 16,
+                color: buoyColors.textMuted
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.modalFeatureText,
+                children: "Cancel anytime"
+              })]
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.modalActions,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.modalUpgradeButton,
+              onPress: handleUpgrade,
+              activeOpacity: 0.8,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.modalUpgradeButtonText,
+                children: "Upgrade to Pro"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.modalDismissButton,
+              onPress: onClose,
+              activeOpacity: 0.8,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.modalDismissButtonText,
+                children: "Close"
+              })
+            })]
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      visible: showLicenseModal,
+      onClose: handleCloseLicenseModal,
+      license: license
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  // Pro Badge styles
+  proBadge: {
+    backgroundColor: buoyColors.primary + "15",
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  proBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    letterSpacing: 0.5
+  },
+  container: {
+    padding: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: gameUIColors.warning + "40"
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: gameUIColors.warning + "20",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: gameUIColors.text,
+    marginBottom: 4
+  },
+  featureName: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: gameUIColors.warning,
+    marginBottom: 8
+  },
+  description: {
+    fontSize: 12,
+    color: gameUIColors.muted,
+    textAlign: "center",
+    marginBottom: 16,
+    lineHeight: 18
+  },
+  upgradeButton: {
+    backgroundColor: gameUIColors.warning,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8
+  },
+  upgradeButtonText: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: "#000"
+  },
+  // Compact styles
+  compactContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: gameUIColors.warning + "20",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: gameUIColors.warning + "40"
+  },
+  compactText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: gameUIColors.warning
+  },
+  // Preview mode styles
+  previewContainer: {
+    position: "relative"
+  },
+  previewContent: {
+    opacity: 0.3
+  },
+  previewOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    borderRadius: 8
+  },
+  // Pro Feature Banner styles - matching web app theme
+  bannerContainer: {
+    position: "relative",
+    backgroundColor: buoyColors.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 14,
+    marginBottom: 12
+  },
+  bannerProBadge: {
+    position: "absolute",
+    top: 10,
+    right: 10
+  },
+  bannerHeader: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12
+  },
+  bannerIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.primary + "20",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  bannerTitleContainer: {
+    flex: 1
+  },
+  bannerTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginBottom: 2
+  },
+  bannerDescription: {
+    fontSize: 12,
+    color: buoyColors.textMuted,
+    lineHeight: 17
+  },
+  benefitsList: {
+    marginTop: 12,
+    gap: 8
+  },
+  benefitItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  benefitText: {
+    fontSize: 13,
+    color: buoyColors.text,
+    flex: 1
+  },
+  bannerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    marginTop: 14
+  },
+  bannerUpgradeButton: {
+    backgroundColor: buoyColors.primary,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8
+  },
+  bannerUpgradeButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#FFFFFF"
+  },
+  // Upgrade Modal styles - using Buoy brand theme
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20
+  },
+  modalContent: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "60",
+    padding: 24,
+    maxWidth: 340,
+    width: "100%",
+    position: "relative",
+    // Glow effect
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  modalCloseButton: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  modalHeader: {
+    alignItems: "center",
+    marginBottom: 20
+  },
+  modalIconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: buoyColors.primary + "20",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 12
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: buoyColors.text,
+    textAlign: "center",
+    marginBottom: 8
+  },
+  modalSubtitle: {
+    fontSize: 13,
+    color: buoyColors.textMuted,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  modalBenefits: {
+    marginBottom: 16
+  },
+  modalBenefitsTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 10
+  },
+  modalBenefitItem: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+    marginBottom: 8
+  },
+  modalBenefitIcon: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: buoyColors.success + "20",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 1
+  },
+  modalBenefitText: {
+    fontSize: 13,
+    color: buoyColors.text,
+    flex: 1,
+    lineHeight: 18
+  },
+  modalFeatureRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20,
+    marginBottom: 20,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  modalFeatureRowNoBenefits: {
+    marginTop: 8,
+    borderTopWidth: 0,
+    paddingTop: 0
+  },
+  modalFeatureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  modalFeatureText: {
+    fontSize: 12,
+    color: buoyColors.textMuted
+  },
+  modalActions: {
+    alignItems: "center",
+    gap: 12
+  },
+  modalUpgradeButton: {
+    backgroundColor: buoyColors.primary,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    width: "100%",
+    alignItems: "center"
+  },
+  modalUpgradeButtonText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: "#FFFFFF"
+  },
+  modalDismissButton: {
+    paddingVertical: 12,
+    width: "100%",
+    alignItems: "center"
+  },
+  modalDismissButtonText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: buoyColors.textMuted
+  }
+});