@buoy-gg/shared-ui 1.7.2

package/lib/module/license/ManageDevicesModal.js

@@ -0,0 +1,539 @@
+"use strict";
+
+/**
+ * ManageDevicesModal - Modal for viewing and managing registered devices
+ *
+ * Shows all devices registered to the license with details and allows
+ * deactivating devices to free up slots.
+ */
+
+import React, { useState, useCallback, useEffect } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Modal, ScrollView, Alert, Platform } from "react-native";
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { X, Smartphone, Trash2, RefreshCw, CheckCircle, AlertTriangle } from "../icons/lucide-icons.js";
+
+// Types
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Lazy load license hooks to avoid circular dependencies
+let _useDevices = null;
+let _useSeats = null;
+function getUseDevices() {
+  if (!_useDevices) {
+    try {
+      const mod = require("@buoy-gg/license");
+      _useDevices = mod.useDevices;
+    } catch {
+      // License package not available
+    }
+  }
+  return _useDevices;
+}
+function getUseSeats() {
+  if (!_useSeats) {
+    try {
+      const mod = require("@buoy-gg/license");
+      _useSeats = mod.useSeats;
+    } catch {
+      // License package not available
+    }
+  }
+  return _useSeats;
+}
+const DeviceIcon = ({
+  platform
+}) => {
+  // Use Smartphone icon for all device types since we don't have Tablet/Monitor icons
+  return /*#__PURE__*/_jsx(Smartphone, {
+    size: 20,
+    color: gameUIColors.text
+  });
+};
+const formatDate = date => {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  if (diffDays === 0) {
+    return "Today";
+  } else if (diffDays === 1) {
+    return "Yesterday";
+  } else if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  } else {
+    return date.toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined
+    });
+  }
+};
+const DeviceRow = ({
+  device,
+  onDeactivate,
+  isDeactivating
+}) => {
+  const handleDeactivate = () => {
+    const message = device.isCurrentDevice ? "This will deactivate your current device. You'll need to enter your license key again to use Pro features." : `Deactivate "${device.name}" from your license?`;
+    Alert.alert("Deactivate Device", message, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Deactivate",
+      style: "destructive",
+      onPress: onDeactivate
+    }]);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.deviceRow, device.isCurrentDevice && styles.currentDeviceRow],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.deviceIcon,
+      children: /*#__PURE__*/_jsx(DeviceIcon, {
+        platform: device.platform
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.deviceInfo,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.deviceNameRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.deviceName,
+          numberOfLines: 1,
+          children: device.name
+        }), device.isCurrentDevice && /*#__PURE__*/_jsxs(View, {
+          style: styles.currentBadge,
+          children: [/*#__PURE__*/_jsx(CheckCircle, {
+            size: 10,
+            color: gameUIColors.success
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.currentBadgeText,
+            children: "This device"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.deviceDetails,
+        children: [device.platform, device.osVersion ? ` ${device.osVersion}` : "", device.model ? ` • ${device.model}` : ""]
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.deviceDate,
+        children: ["Registered ", formatDate(device.registeredAt)]
+      })]
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.deactivateButton,
+      onPress: handleDeactivate,
+      disabled: isDeactivating,
+      children: isDeactivating ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: gameUIColors.error
+      }) : /*#__PURE__*/_jsx(Trash2, {
+        size: 18,
+        color: gameUIColors.error
+      })
+    })]
+  });
+};
+export const ManageDevicesModal = ({
+  visible,
+  onClose,
+  onDeviceChange
+}) => {
+  const [deactivatingId, setDeactivatingId] = useState(null);
+  const useDevicesHook = getUseDevices();
+  const useSeatsHook = getUseSeats();
+  const devicesData = useDevicesHook?.();
+  const seatsData = useSeatsHook?.();
+  const devices = devicesData?.devices || [];
+  const isLoading = devicesData?.isLoading || false;
+  const error = devicesData?.error || null;
+  const refreshDevices = devicesData?.refreshDevices;
+  const deactivateDevice = devicesData?.deactivateDevice;
+  const registerDevice = devicesData?.registerDevice;
+  const isCurrentDeviceRegistered = devicesData?.isCurrentDeviceRegistered || false;
+  const used = seatsData?.used || 0;
+  const total = seatsData?.total || null;
+
+  // Refresh when modal opens
+  useEffect(() => {
+    if (visible && refreshDevices) {
+      refreshDevices();
+    }
+  }, [visible, refreshDevices]);
+  const handleDeactivate = useCallback(async machineId => {
+    if (!deactivateDevice) return;
+    setDeactivatingId(machineId);
+    const success = await deactivateDevice(machineId);
+    setDeactivatingId(null);
+    if (success) {
+      onDeviceChange?.();
+    }
+  }, [deactivateDevice, onDeviceChange]);
+  const handleRegisterCurrentDevice = useCallback(async () => {
+    if (!registerDevice) return;
+
+    // Generate a default device name
+    const platformName = Platform.OS === "ios" ? "iOS" : Platform.OS === "android" ? "Android" : Platform.OS;
+    const defaultName = `My ${platformName} Device`;
+    const result = await registerDevice(defaultName);
+    if (result.success) {
+      onDeviceChange?.();
+    }
+  }, [registerDevice, onDeviceChange]);
+  const handleRefresh = useCallback(() => {
+    refreshDevices?.();
+  }, [refreshDevices]);
+  const renderContent = () => {
+    if (isLoading && devices.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.loadingContainer,
+        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "large",
+          color: gameUIColors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.loadingText,
+          children: "Loading devices..."
+        })]
+      });
+    }
+    if (error) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.errorContainer,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 32,
+          color: gameUIColors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.errorText,
+          children: error
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.retryButton,
+          onPress: handleRefresh,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.retryButtonText,
+            children: "Try Again"
+          })
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.statsContainer,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.statValue,
+            children: used
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            children: "Devices"
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.statDivider
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.statValue,
+            children: total || "∞"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            children: "Limit"
+          })]
+        }), total !== null && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.statDivider
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.statItem,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.statValue, total - used <= 0 && styles.statValueDanger],
+              children: Math.max(0, total - used)
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.statLabel,
+              children: "Available"
+            })]
+          })]
+        })]
+      }), !isCurrentDeviceRegistered && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.registerButton,
+        onPress: handleRegisterCurrentDevice,
+        disabled: isLoading,
+        children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: "#fff"
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Smartphone, {
+            size: 16,
+            color: "#fff"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.registerButtonText,
+            children: "Register This Device"
+          })]
+        })
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.deviceList,
+        showsVerticalScrollIndicator: false,
+        children: devices.length === 0 ? /*#__PURE__*/_jsxs(View, {
+          style: styles.emptyContainer,
+          children: [/*#__PURE__*/_jsx(Smartphone, {
+            size: 40,
+            color: gameUIColors.muted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyText,
+            children: "No devices registered"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.emptySubtext,
+            children: "Register this device to start using Pro features"
+          })]
+        }) : devices.map(device => /*#__PURE__*/_jsx(DeviceRow, {
+          device: device,
+          onDeactivate: () => handleDeactivate(device.id),
+          isDeactivating: deactivatingId === device.id
+        }, device.id))
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.overlay,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.backdrop,
+        activeOpacity: 1,
+        onPress: onClose
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.modal,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.header,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Manage Devices"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.headerActions,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.refreshButton,
+              onPress: handleRefresh,
+              disabled: isLoading,
+              children: /*#__PURE__*/_jsx(RefreshCw, {
+                size: 18,
+                color: gameUIColors.muted,
+                style: isLoading ? {
+                  opacity: 0.5
+                } : undefined
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.closeButton,
+              onPress: onClose,
+              children: /*#__PURE__*/_jsx(X, {
+                size: 20,
+                color: gameUIColors.muted
+              })
+            })]
+          })]
+        }), renderContent()]
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.7)"
+  },
+  modal: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 16,
+    width: "90%",
+    maxWidth: 420,
+    maxHeight: "80%",
+    borderWidth: 1,
+    borderColor: gameUIColors.border
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: gameUIColors.border
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: gameUIColors.text
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  refreshButton: {
+    padding: 4
+  },
+  closeButton: {
+    padding: 4
+  },
+  statsContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    backgroundColor: gameUIColors.background
+  },
+  statItem: {
+    alignItems: "center",
+    paddingHorizontal: 20
+  },
+  statValue: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: gameUIColors.text
+  },
+  statValueDanger: {
+    color: gameUIColors.error
+  },
+  statLabel: {
+    fontSize: 12,
+    color: gameUIColors.muted,
+    marginTop: 2
+  },
+  statDivider: {
+    width: 1,
+    height: 30,
+    backgroundColor: gameUIColors.border
+  },
+  registerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: gameUIColors.success,
+    marginHorizontal: 16,
+    marginTop: 16,
+    paddingVertical: 12,
+    borderRadius: 8
+  },
+  registerButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  deviceList: {
+    flex: 1,
+    padding: 16
+  },
+  deviceRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    backgroundColor: gameUIColors.background,
+    borderRadius: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.border
+  },
+  currentDeviceRow: {
+    borderColor: gameUIColors.success + "60",
+    backgroundColor: gameUIColors.success + "10"
+  },
+  deviceIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: gameUIColors.panel,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  deviceInfo: {
+    flex: 1,
+    marginLeft: 12
+  },
+  deviceNameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  deviceName: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.text,
+    flexShrink: 1
+  },
+  currentBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: gameUIColors.success + "20",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  currentBadgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: gameUIColors.success
+  },
+  deviceDetails: {
+    fontSize: 12,
+    color: gameUIColors.muted,
+    marginTop: 2
+  },
+  deviceDate: {
+    fontSize: 11,
+    color: gameUIColors.muted,
+    marginTop: 4
+  },
+  deactivateButton: {
+    padding: 8,
+    marginLeft: 8
+  },
+  loadingContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 40
+  },
+  loadingText: {
+    fontSize: 14,
+    color: gameUIColors.muted,
+    marginTop: 12
+  },
+  errorContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 40
+  },
+  errorText: {
+    fontSize: 14,
+    color: gameUIColors.error,
+    marginTop: 12,
+    textAlign: "center"
+  },
+  retryButton: {
+    marginTop: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 16
+  },
+  retryButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.primary
+  },
+  emptyContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 40
+  },
+  emptyText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: gameUIColors.text,
+    marginTop: 16
+  },
+  emptySubtext: {
+    fontSize: 13,
+    color: gameUIColors.muted,
+    marginTop: 4,
+    textAlign: "center"
+  }
+});

package/lib/module/license/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, ProBadge, ProUpgradeModal } from "./FeatureGate.js";
+export { LicenseEntryModal } from "./LicenseEntryModal.js";
+export { ManageDevicesModal } from "./ManageDevicesModal.js";