pixelize-design-library 2.3.1-beta.9 → 2.3.2

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var TextInput_1 = __importDefault(require("../Input/TextInput"));
+var SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+var ChangeRoleModal = function (_a) {
+    var _b, _c, _d, _e;
+    var isOpen = _a.isOpen, onClose = _a.onClose, userId = _a.userId, email = _a.email, currentRole = _a.currentRole, roleOptions = _a.roleOptions, isLoading = _a.isLoading, onSubmit = _a.onSubmit, onAddRoleClick = _a.onAddRoleClick, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(null), selectedRole = _f[0], setSelectedRole = _f[1];
+    var _g = (0, react_1.useState)(null), error = _g[0], setError = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (isOpen && currentRole) {
+            var match = roleOptions.find(function (role) { return role.label.toLowerCase() === currentRole.toLowerCase(); });
+            setSelectedRole(match ? { id: match.id, label: match.label } : null);
+            setError(null);
+        }
+        else if (!isOpen) {
+            setSelectedRole(null);
+            setError(null);
+        }
+    }, [isOpen, currentRole, roleOptions]);
+    var isUnchanged = ((_b = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!selectedRole) {
+                        setError(labels.roleRequired);
+                        return [2 /*return*/];
+                    }
+                    if (userId == null)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId: userId, roleId: selectedRole.id }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] }, labels.changeRoleTitle),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 5 },
+                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+                    react_1.default.createElement(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }),
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!error, isRequired: true },
+                        react_1.default.createElement(SearchSelect_1.default, { label: labels.role, options: roleOptions.map(function (item) { return ({
+                                id: item.id,
+                                label: item.label,
+                            }); }), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: function (option) {
+                                if (!option) {
+                                    setSelectedRole(null);
+                                }
+                                else if (!Array.isArray(option)) {
+                                    setSelectedRole({
+                                        id: Number(option.id),
+                                        label: option.label,
+                                    });
+                                    setError(null);
+                                }
+                            }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
+                                ? {
+                                    enabled: true,
+                                    text: labels.addNewRole,
+                                    onClick: onAddRoleClick,
+                                }
+                                : undefined })))),
+            react_1.default.createElement(react_2.ModalFooter, null,
+                react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }),
+                react_1.default.createElement(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })))));
+};
+exports.default = ChangeRoleModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DeactivateConfirmModalProps } from "./UserDetailsProps";
+declare const DeactivateConfirmModal: React.FC<DeactivateConfirmModalProps>;
+export default DeactivateConfirmModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var DeactivateConfirmModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var isOpen = _a.isOpen, onClose = _a.onClose, userName = _a.userName, isLoading = _a.isLoading, onConfirm = _a.onConfirm, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
+                    react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
+                react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.confirmDeactivation)),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 6 },
+                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: 500, color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[800] }, labels.deactivateConfirmQuestion),
+                    react_1.default.createElement(react_2.Box, { bg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#F8FAFC", borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200] },
+                        react_1.default.createElement(react_2.Text, { color: (_w = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _w === void 0 ? void 0 : _w[600], fontSize: "sm" },
+                            userName ? "".concat(userName, " ") : "",
+                            labels.deactivateConfirmDescription)),
+                    react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2 },
+                        react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }),
+                        react_1.default.createElement(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 16 }) })))))));
+};
+exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { UserDetailsProps } from "./UserDetailsProps";
+declare const UserDetails: React.FC<UserDetailsProps>;
+export default UserDetails;

package/dist/Components/UserDetails/UserDetails.js

@@ -0,0 +1,263 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var AddUserModal_1 = __importDefault(require("./AddUserModal"));
+var ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
+var DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
+var DEFAULT_LABELS = {
+    teamMembers: "Team Members",
+    refreshList: "Refresh list",
+    userDetails: "User Details",
+    selectTeamMember: "Select a Team Member",
+    addUser: "Add User",
+    resendInvitation: "Resend Invitation",
+    deactivateUser: "Deactivate User",
+    changeRole: "Change Role",
+    you: "You",
+    active: "Active",
+    inactive: "Inactive",
+    pendingInvitation: "Pending Invitation",
+    personalInformation: "Personal Information",
+    noUsers: "No team members yet",
+    noUserSelected: "Select a team member to view their details",
+    addNewUser: "Add New User",
+    firstName: "First Name",
+    lastName: "Last Name",
+    email: "Email",
+    role: "Role",
+    firstNamePlaceholder: "First Name",
+    lastNamePlaceholder: "Last Name",
+    emailPlaceholder: "An invite will be sent to this email",
+    addNewRole: "Add New Role",
+    cancel: "Cancel",
+    save: "Save",
+    firstNameRequired: "First Name is required",
+    lastNameRequired: "Last Name is required",
+    emailRequired: "Email is required",
+    emailInvalid: "Invalid email",
+    roleRequired: "Role is required",
+    changeRoleTitle: "Change Role",
+    confirmDeactivation: "Confirm Deactivation",
+    deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
+    deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
+};
+var UserDetails = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var users = _a.users, selectedUser = _a.selectedUser, selectedUserId = _a.selectedUserId, _s = _a.roleOptions, roleOptions = _s === void 0 ? [] : _s, _t = _a.canManageUsers, canManageUsers = _t === void 0 ? false : _t, _u = _a.isUsersLoading, isUsersLoading = _u === void 0 ? false : _u, _v = _a.isInviteLoading, isInviteLoading = _v === void 0 ? false : _v, _w = _a.isDeactivateLoading, isDeactivateLoading = _w === void 0 ? false : _w, _x = _a.isAddUserLoading, isAddUserLoading = _x === void 0 ? false : _x, _y = _a.isChangeRoleLoading, isChangeRoleLoading = _y === void 0 ? false : _y, onSelectUser = _a.onSelectUser, onRefresh = _a.onRefresh, onBack = _a.onBack, onAddUserSubmit = _a.onAddUserSubmit, onChangeRoleSubmit = _a.onChangeRoleSubmit, onReinvite = _a.onReinvite, onDeactivate = _a.onDeactivate, onAddRoleClick = _a.onAddRoleClick, addUserUpgradeNotice = _a.addUserUpgradeNotice, labelOverrides = _a.labels, _z = _a.minHeight, minHeight = _z === void 0 ? "90vh" : _z;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var _0 = (0, react_2.useDisclosure)(), isAddUserOpen = _0.isOpen, onAddUserOpen = _0.onOpen, onAddUserClose = _0.onClose;
+    var _1 = (0, react_2.useDisclosure)(), isChangeRoleOpen = _1.isOpen, onChangeRoleOpen = _1.onOpen, onChangeRoleClose = _1.onClose;
+    var _2 = (0, react_2.useDisclosure)(), isConfirmOpen = _2.isOpen, onConfirmOpen = _2.onOpen, onConfirmClose = _2.onClose;
+    var _3 = (0, react_1.useState)(null), actionUserId = _3[0], setActionUserId = _3[1];
+    var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
+    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    var successScheme = "green";
+    var dangerScheme = "red";
+    var handleDeactivateConfirm = function () {
+        if (actionUserId != null)
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
+        onConfirmClose();
+    };
+    var renderStatusBadge = function (isActive) { return (react_1.default.createElement(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none" }, isActive ? labels.active : labels.inactive)); };
+    return (react_1.default.createElement(react_2.Flex, { backgroundColor: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC", minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" } },
+        react_1.default.createElement(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column" },
+            react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between" },
+                react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                    onBack && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Go back", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })),
+                    react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.teamMembers),
+                    react_1.default.createElement(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2 }, users.length)),
+                onRefresh && (react_1.default.createElement(react_2.IconButton, { "aria-label": labels.refreshList, icon: react_1.default.createElement(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))),
+            react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: "calc(".concat(minHeight, " - 80px)") } }, isUsersLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 2, p: 3 }, Array.from({ length: 6 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, alignItems: "center", gap: 3, p: 2, w: "100%" },
+                react_1.default.createElement(react_2.SkeletonCircle, { size: "9" }),
+                react_1.default.createElement(react_2.Box, { flex: 1 },
+                    react_1.default.createElement(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }),
+                    react_1.default.createElement(react_2.Skeleton, { height: "9px", width: "60%" })))); }))) : users.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (react_1.default.createElement(react_2.VStack, { spacing: 1, p: 2, align: "stretch" }, users.map(function (user) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var isSelected = selectedUserId != null && selectedUserId === user.id;
+                return (react_1.default.createElement(react_2.Flex, { key: user.id, p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#EEF2FF" : "transparent", _hover: {
+                        background: isSelected
+                            ? (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#EEF2FF"
+                            : (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#F8FAFC",
+                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: function () { return onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user); } },
+                    isSelected && (react_1.default.createElement(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#6366F1" })),
+                    react_1.default.createElement(react_2.Avatar, { size: "sm", name: "".concat(user.firstName, " ").concat(user.lastName), src: user.profile, bg: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[100]) !== null && _k !== void 0 ? _k : "#E0E7FF", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#4F46E5" }),
+                    react_1.default.createElement(react_2.Box, { flex: 1, overflow: "hidden" },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading },
+                            user.firstName,
+                            " ",
+                            user.lastName),
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1 }, user.email)),
+                    renderStatusBadge(user.isActive)));
+            }))))),
+        react_1.default.createElement(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden" },
+            react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border },
+                react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, selectedUser ? labels.userDetails : labels.selectTeamMember),
+                canManageUsers && (react_1.default.createElement(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen }, labels.addUser))),
+            react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, isUsersLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 4, p: 4, align: "stretch" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 4 },
+                    react_1.default.createElement(react_2.SkeletonCircle, { size: "16" }),
+                    react_1.default.createElement(react_2.Box, { flex: 1 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }),
+                        react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "35%" }))),
+                Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "100%" },
+                    react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }),
+                    react_1.default.createElement(react_2.Skeleton, { height: "10px", width: "80%" }))); }))) : selectedUser ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border },
+                    react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: 4 },
+                        react_1.default.createElement(react_2.Box, { position: "relative" },
+                            react_1.default.createElement(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _o === void 0 ? void 0 : _o[100]) !== null && _p !== void 0 ? _p : "#E0E7FF", color: (_r = (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[600]) !== null && _r !== void 0 ? _r : "#4F46E5" }),
+                            selectedUser.isCurrent && (react_1.default.createElement(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none" }, labels.you))),
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(react_2.Heading, { size: "md", mb: 1, color: heading }, selectedUser.name),
+                            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: muted, mb: 2 }, selectedUser.role),
+                            react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                                renderStatusBadge(selectedUser.isActive),
+                                selectedUser.isPending && (react_1.default.createElement(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none" }, labels.pendingInvitation))))),
+                    canManageUsers &&
+                        !selectedUser.isSuperAdmin && (react_1.default.createElement(react_2.HStack, { spacing: 2, flexWrap: "wrap" },
+                        !selectedUser.isCurrent && !selectedUser.isActive && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: function () {
+                                return selectedUser.userId != null &&
+                                    (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId));
+                            } }, labels.resendInvitation)),
+                        react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Shield, { size: 13 }), onClick: function () {
+                                if (selectedUser.userId != null) {
+                                    setActionUserId(selectedUser.userId);
+                                    onChangeRoleOpen();
+                                }
+                            } }, labels.changeRole),
+                        !selectedUser.isCurrent && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "ghost", colorScheme: "red", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 13 }), isDisabled: selectedUser.userId == null || isDeactivateLoading, onClick: function () {
+                                if (selectedUser.userId != null) {
+                                    setActionUserId(selectedUser.userId);
+                                    onConfirmOpen();
+                                }
+                            } }, labels.deactivateUser))))),
+                react_1.default.createElement(react_2.Box, { p: 4 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3 }, labels.personalInformation),
+                    react_1.default.createElement(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden" }, selectedUser.details.map(function (detail, index) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        var Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
+                        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                            react_1.default.createElement(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: { bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC" }, alignItems: "center", transition: "background 0.15s ease" },
+                                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#EEF2FF", borderRadius: "lg", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4F46E5", flexShrink: 0 },
+                                    react_1.default.createElement(Icon, { size: 15 })),
+                                react_1.default.createElement(react_2.Box, { minWidth: "110px" },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted }, detail.label)),
+                                react_1.default.createElement(react_2.Box, { flex: 1 },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500 }, detail.value))),
+                            index < selectedUser.details.length - 1 && (react_1.default.createElement(react_2.Divider, { borderColor: border }))));
+                    }))))) : (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })))),
+        react_1.default.createElement(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values))];
+                        case 1:
+                            _a.sent();
+                            onAddUserClose();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, onAddRoleClick: onAddRoleClick, upgradeNotice: addUserUpgradeNotice, labels: labels }),
+        react_1.default.createElement(ChangeRoleModal_1.default, { isOpen: isChangeRoleOpen, onClose: onChangeRoleClose, userId: actionUserId, email: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.email, currentRole: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.role, roleOptions: roleOptions, isLoading: isChangeRoleLoading, onSubmit: function (payload) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (onChangeRoleSubmit === null || onChangeRoleSubmit === void 0 ? void 0 : onChangeRoleSubmit(payload))];
+                        case 1:
+                            _a.sent();
+                            onChangeRoleClose();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, onAddRoleClick: onAddRoleClick, labels: labels }),
+        react_1.default.createElement(DeactivateConfirmModal_1.default, { isOpen: isConfirmOpen, onClose: onConfirmClose, userName: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.name, isLoading: isDeactivateLoading, onConfirm: handleDeactivateConfirm, labels: labels })));
+};
+exports.default = UserDetails;

package/dist/Components/UserDetails/UserDetails.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/UserDetails/UserDetails.test.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var UserDetails_1 = __importDefault(require("./UserDetails"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                300: "#cbd5e1",
+                400: "#94a3b8",
+                500: "#64748b",
+                600: "#475569",
+                700: "#334155",
+                800: "#1e293b",
+            },
+            primary: {
+                50: "#eef2ff",
+                100: "#e0e7ff",
+                300: "#a5b4fc",
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+            },
+            boxborder: { 200: "#e2e8f0" },
+            text: { 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155" },
+            secondary: { 500: "#805ad5" },
+            backgroundColor: { light: "#ffffff" },
+            blue: { 400: "#60a5fa" },
+            green: { 400: "#4ade80" },
+            red: { 400: "#f87171", 500: "#ef4444", 50: "#fef2f2" },
+            yellow: { 500: "#eab308" },
+            semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var users = [
+    {
+        id: 1,
+        firstName: "Jane",
+        lastName: "Doe",
+        email: "jane@example.com",
+        role: "Admin",
+        isActive: true,
+        isCurrent: true,
+        isSuperAdmin: true,
+    },
+    {
+        id: 2,
+        firstName: "John",
+        lastName: "Smith",
+        email: "john@example.com",
+        role: "Sales",
+        isActive: false,
+        isPending: true,
+    },
+];
+var selectedUser = {
+    userId: 2,
+    name: "John Smith",
+    role: "Sales",
+    email: "john@example.com",
+    isActive: false,
+    isPending: true,
+    isCurrent: false,
+    isSuperAdmin: false,
+    details: [
+        { label: "Email", value: "john@example.com", icon: lucide_react_1.Mail },
+        { label: "Role", value: "Sales", icon: lucide_react_1.Mail },
+    ],
+};
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("UserDetails", function () {
+    it("renders the team member list", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: null }));
+        expect(react_2.screen.getByText("Team Members")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Jane Doe")).toBeInTheDocument();
+        expect(react_2.screen.getByText("John Smith")).toBeInTheDocument();
+    });
+    it("calls onSelectUser when a list item is clicked", function () {
+        var onSelectUser = jest.fn();
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: null, onSelectUser: onSelectUser }));
+        react_2.fireEvent.click(react_2.screen.getByText("John Smith"));
+        expect(onSelectUser).toHaveBeenCalledWith(expect.objectContaining({ id: 2 }));
+    });
+    it("shows an empty state when there are no users", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: [], selectedUser: null }));
+        expect(react_2.screen.getByText("No team members yet")).toBeInTheDocument();
+    });
+    it("renders the selected user's details", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: selectedUser, selectedUserId: 2 }));
+        expect(react_2.screen.getByText("User Details")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Personal Information")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Pending Invitation")).toBeInTheDocument();
+    });
+    it("opens the Add User modal when the action is triggered", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: selectedUser, selectedUserId: 2, canManageUsers: true, roleOptions: [{ id: 1, label: "Admin" }] }));
+        react_2.fireEvent.click(react_2.screen.getAllByText("Add User")[0]);
+        expect(react_2.screen.getByText("Add New User")).toBeInTheDocument();
+    });
+});