csdk-test 1.0.27 → 1.0.28

package/dist/index.esm.js

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+
+const API_BASE_URL = 'https://staging.imagine.io';
+const styles = {
+  container: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: '24px',
+    maxWidth: '500px',
+    margin: '0 auto'
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: '12px',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    padding: '24px'
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '20px',
+    gap: '16px'
+  },
+  avatar: {
+    width: '64px',
+    height: '64px',
+    borderRadius: '50%',
+    backgroundColor: '#e0e0e0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '24px',
+    color: '#666',
+    overflow: 'hidden'
+  },
+  avatarImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
+  },
+  name: {
+    fontSize: '20px',
+    fontWeight: '600',
+    color: '#1a1a1a',
+    margin: 0
+  },
+  email: {
+    fontSize: '14px',
+    color: '#666',
+    margin: '4px 0 0 0'
+  },
+  detailsGrid: {
+    display: 'grid',
+    gap: '12px'
+  },
+  detailRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '8px 0',
+    borderBottom: '1px solid #f0f0f0'
+  },
+  label: {
+    fontSize: '14px',
+    color: '#666'
+  },
+  value: {
+    fontSize: '14px',
+    color: '#1a1a1a',
+    fontWeight: '500'
+  },
+  loading: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '40px',
+    color: '#666'
+  },
+  error: {
+    backgroundColor: '#fee',
+    color: '#c00',
+    padding: '16px',
+    borderRadius: '8px',
+    textAlign: 'center'
+  },
+  spinner: {
+    width: '24px',
+    height: '24px',
+    border: '3px solid #f0f0f0',
+    borderTop: '3px solid #666',
+    borderRadius: '50%',
+    animation: 'spin 1s linear infinite'
+  }
+};
+const UserDetails = _ref => {
+  let {
+    token,
+    apiBaseUrl,
+    onUserLoaded,
+    onError
+  } = _ref;
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const baseUrl = apiBaseUrl || API_BASE_URL;
+  useEffect(() => {
+    if (!token) {
+      setError('Token is required');
+      setLoading(false);
+      return;
+    }
+    const fetchUserDetails = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const response = await fetch("".concat(baseUrl, "/users/api/v3/user-details/"), {
+          method: 'GET',
+          headers: {
+            'Authorization': "Bearer ".concat(token),
+            'Content-Type': 'application/json'
+          }
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch user details: ".concat(response.status));
+        }
+        const data = await response.json();
+        setUser(data);
+        if (onUserLoaded) {
+          onUserLoaded(data);
+        }
+      } catch (err) {
+        const errorMessage = err.message || 'Failed to fetch user details';
+        setError(errorMessage);
+        if (onError) {
+          onError(err);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUserDetails();
+  }, [token, baseUrl, onUserLoaded, onError]);
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styles.card
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styles.loading
+    }, /*#__PURE__*/React.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"), /*#__PURE__*/React.createElement("div", {
+      style: styles.spinner
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: '12px'
+      }
+    }, "Loading user details..."))));
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styles.error
+    }, /*#__PURE__*/React.createElement("strong", null, "Error:"), " ", error));
+  }
+  if (!user) {
+    return null;
+  }
+  const getInitials = name => {
+    if (!name) return '?';
+    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.card
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.avatar
+  }, user.profile_pic ? /*#__PURE__*/React.createElement("img", {
+    src: user.profile_pic,
+    alt: user.name,
+    style: styles.avatarImage
+  }) : getInitials(user.name || user.first_name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
+    style: styles.name
+  }, user.name || "".concat(user.first_name || '', " ").concat(user.last_name || '').trim() || 'Unknown User'), /*#__PURE__*/React.createElement("p", {
+    style: styles.email
+  }, user.email))), /*#__PURE__*/React.createElement("div", {
+    style: styles.detailsGrid
+  }, user.id && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "User ID"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, user.id)), user.organization && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "Organization"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, user.organization.name || user.organization)), user.role && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "Role"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, user.role)), user.phone && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "Phone"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, user.phone)), user.created_at && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "Member Since"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, new Date(user.created_at).toLocaleDateString())), typeof user.is_verified !== 'undefined' && /*#__PURE__*/React.createElement("div", {
+    style: styles.detailRow
+  }, /*#__PURE__*/React.createElement("span", {
+    style: styles.label
+  }, "Verified"), /*#__PURE__*/React.createElement("span", {
+    style: styles.value
+  }, user.is_verified ? 'Yes' : 'No')))));
+};
+
+export { UserDetails, UserDetails as default };