@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/license/ManageDevicesModal.js

@@ -0,0 +1,545 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ManageDevicesModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _lucideIcons = require("../icons/lucide-icons.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+
+// Types
+
+// 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__*/(0, _jsxRuntime.jsx)(_lucideIcons.Smartphone, {
+    size: 20,
+    color: _gameUIColors.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?`;
+    _reactNative.Alert.alert("Deactivate Device", message, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Deactivate",
+      style: "destructive",
+      onPress: onDeactivate
+    }]);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.deviceRow, device.isCurrentDevice && styles.currentDeviceRow],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.deviceIcon,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DeviceIcon, {
+        platform: device.platform
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.deviceInfo,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.deviceNameRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.deviceName,
+          numberOfLines: 1,
+          children: device.name
+        }), device.isCurrentDevice && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.currentBadge,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.CheckCircle, {
+            size: 10,
+            color: _gameUIColors.gameUIColors.success
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.currentBadgeText,
+            children: "This device"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.deviceDetails,
+        children: [device.platform, device.osVersion ? ` ${device.osVersion}` : "", device.model ? ` • ${device.model}` : ""]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.deviceDate,
+        children: ["Registered ", formatDate(device.registeredAt)]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.deactivateButton,
+      onPress: handleDeactivate,
+      disabled: isDeactivating,
+      children: isDeactivating ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: _gameUIColors.gameUIColors.error
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Trash2, {
+        size: 18,
+        color: _gameUIColors.gameUIColors.error
+      })
+    })]
+  });
+};
+const ManageDevicesModal = ({
+  visible,
+  onClose,
+  onDeviceChange
+}) => {
+  const [deactivatingId, setDeactivatingId] = (0, _react.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
+  (0, _react.useEffect)(() => {
+    if (visible && refreshDevices) {
+      refreshDevices();
+    }
+  }, [visible, refreshDevices]);
+  const handleDeactivate = (0, _react.useCallback)(async machineId => {
+    if (!deactivateDevice) return;
+    setDeactivatingId(machineId);
+    const success = await deactivateDevice(machineId);
+    setDeactivatingId(null);
+    if (success) {
+      onDeviceChange?.();
+    }
+  }, [deactivateDevice, onDeviceChange]);
+  const handleRegisterCurrentDevice = (0, _react.useCallback)(async () => {
+    if (!registerDevice) return;
+
+    // Generate a default device name
+    const platformName = _reactNative.Platform.OS === "ios" ? "iOS" : _reactNative.Platform.OS === "android" ? "Android" : _reactNative.Platform.OS;
+    const defaultName = `My ${platformName} Device`;
+    const result = await registerDevice(defaultName);
+    if (result.success) {
+      onDeviceChange?.();
+    }
+  }, [registerDevice, onDeviceChange]);
+  const handleRefresh = (0, _react.useCallback)(() => {
+    refreshDevices?.();
+  }, [refreshDevices]);
+  const renderContent = () => {
+    if (isLoading && devices.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.loadingContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "large",
+          color: _gameUIColors.gameUIColors.primary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.loadingText,
+          children: "Loading devices..."
+        })]
+      });
+    }
+    if (error) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.errorContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.AlertTriangle, {
+          size: 32,
+          color: _gameUIColors.gameUIColors.error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.errorText,
+          children: error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.retryButton,
+          onPress: handleRefresh,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.retryButtonText,
+            children: "Try Again"
+          })
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statsContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.statValue,
+            children: used
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.statLabel,
+            children: "Devices"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.statDivider
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.statValue,
+            children: total || "∞"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.statLabel,
+            children: "Limit"
+          })]
+        }), total !== null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.statDivider
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.statItem,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.statValue, total - used <= 0 && styles.statValueDanger],
+              children: Math.max(0, total - used)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.statLabel,
+              children: "Available"
+            })]
+          })]
+        })]
+      }), !isCurrentDeviceRegistered && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.registerButton,
+        onPress: handleRegisterCurrentDevice,
+        disabled: isLoading,
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "small",
+          color: "#fff"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Smartphone, {
+            size: 16,
+            color: "#fff"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.registerButtonText,
+            children: "Register This Device"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.deviceList,
+        showsVerticalScrollIndicator: false,
+        children: devices.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.emptyContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Smartphone, {
+            size: 40,
+            color: _gameUIColors.gameUIColors.muted
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.emptyText,
+            children: "No devices registered"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.emptySubtext,
+            children: "Register this device to start using Pro features"
+          })]
+        }) : devices.map(device => /*#__PURE__*/(0, _jsxRuntime.jsx)(DeviceRow, {
+          device: device,
+          onDeactivate: () => handleDeactivate(device.id),
+          isDeactivating: deactivatingId === device.id
+        }, device.id))
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.overlay,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.backdrop,
+        activeOpacity: 1,
+        onPress: onClose
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.modal,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.header,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.title,
+            children: "Manage Devices"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.headerActions,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.refreshButton,
+              onPress: handleRefresh,
+              disabled: isLoading,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.RefreshCw, {
+                size: 18,
+                color: _gameUIColors.gameUIColors.muted,
+                style: isLoading ? {
+                  opacity: 0.5
+                } : undefined
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.closeButton,
+              onPress: onClose,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.X, {
+                size: 20,
+                color: _gameUIColors.gameUIColors.muted
+              })
+            })]
+          })]
+        }), renderContent()]
+      })]
+    })
+  });
+};
+exports.ManageDevicesModal = ManageDevicesModal;
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.7)"
+  },
+  modal: {
+    backgroundColor: _gameUIColors.gameUIColors.panel,
+    borderRadius: 16,
+    width: "90%",
+    maxWidth: 420,
+    maxHeight: "80%",
+    borderWidth: 1,
+    borderColor: _gameUIColors.gameUIColors.border
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: _gameUIColors.gameUIColors.border
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: _gameUIColors.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.gameUIColors.background
+  },
+  statItem: {
+    alignItems: "center",
+    paddingHorizontal: 20
+  },
+  statValue: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: _gameUIColors.gameUIColors.text
+  },
+  statValueDanger: {
+    color: _gameUIColors.gameUIColors.error
+  },
+  statLabel: {
+    fontSize: 12,
+    color: _gameUIColors.gameUIColors.muted,
+    marginTop: 2
+  },
+  statDivider: {
+    width: 1,
+    height: 30,
+    backgroundColor: _gameUIColors.gameUIColors.border
+  },
+  registerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: _gameUIColors.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.gameUIColors.background,
+    borderRadius: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: _gameUIColors.gameUIColors.border
+  },
+  currentDeviceRow: {
+    borderColor: _gameUIColors.gameUIColors.success + "60",
+    backgroundColor: _gameUIColors.gameUIColors.success + "10"
+  },
+  deviceIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: _gameUIColors.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.gameUIColors.text,
+    flexShrink: 1
+  },
+  currentBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _gameUIColors.gameUIColors.success + "20",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  currentBadgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.success
+  },
+  deviceDetails: {
+    fontSize: 12,
+    color: _gameUIColors.gameUIColors.muted,
+    marginTop: 2
+  },
+  deviceDate: {
+    fontSize: 11,
+    color: _gameUIColors.gameUIColors.muted,
+    marginTop: 4
+  },
+  deactivateButton: {
+    padding: 8,
+    marginLeft: 8
+  },
+  loadingContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 40
+  },
+  loadingText: {
+    fontSize: 14,
+    color: _gameUIColors.gameUIColors.muted,
+    marginTop: 12
+  },
+  errorContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 40
+  },
+  errorText: {
+    fontSize: 14,
+    color: _gameUIColors.gameUIColors.error,
+    marginTop: 12,
+    textAlign: "center"
+  },
+  retryButton: {
+    marginTop: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 16
+  },
+  retryButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.primary
+  },
+  emptyContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 40
+  },
+  emptyText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.text,
+    marginTop: 16
+  },
+  emptySubtext: {
+    fontSize: 13,
+    color: _gameUIColors.gameUIColors.muted,
+    marginTop: 4,
+    textAlign: "center"
+  }
+});

package/lib/commonjs/license/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FeatureGate", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.FeatureGate;
+  }
+});
+Object.defineProperty(exports, "LicenseEntryModal", {
+  enumerable: true,
+  get: function () {
+    return _LicenseEntryModal.LicenseEntryModal;
+  }
+});
+Object.defineProperty(exports, "ManageDevicesModal", {
+  enumerable: true,
+  get: function () {
+    return _ManageDevicesModal.ManageDevicesModal;
+  }
+});
+Object.defineProperty(exports, "ProBadge", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.ProBadge;
+  }
+});
+Object.defineProperty(exports, "ProFeatureBanner", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.ProFeatureBanner;
+  }
+});
+Object.defineProperty(exports, "ProUpgradeModal", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.ProUpgradeModal;
+  }
+});
+Object.defineProperty(exports, "UpgradeModal", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.UpgradeModal;
+  }
+});
+Object.defineProperty(exports, "UpgradePrompt", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.UpgradePrompt;
+  }
+});
+Object.defineProperty(exports, "useFeatureGate", {
+  enumerable: true,
+  get: function () {
+    return _FeatureGate.useFeatureGate;
+  }
+});
+var _FeatureGate = require("./FeatureGate.js");
+var _LicenseEntryModal = require("./LicenseEntryModal.js");
+var _ManageDevicesModal = require("./ManageDevicesModal.js");