UNPKG

@oxyhq/services

Version:

OxyHQ Expo/React Native SDK — UI components, screens, and native features

333 lines (330 loc) 14.3 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _reactNative = require("react-native"); var _react = require("react"); var _core = require("@oxyhq/core"); var _sonner = require("../../lib/sonner"); var _confirmAction = require("../utils/confirmAction.js"); var _fonts = require("../styles/fonts.js"); var _ProfileCard = _interopRequireDefault(require("../components/ProfileCard.js")); var _Section = _interopRequireDefault(require("../components/Section.js")); var _QuickActions = _interopRequireDefault(require("../components/QuickActions.js")); var _GroupedSection = _interopRequireDefault(require("../components/GroupedSection.js")); var _GroupedItem = _interopRequireDefault(require("../components/GroupedItem.js")); var _useI18n = require("../hooks/useI18n.js"); var _useThemeStyles = require("../hooks/useThemeStyles.js"); var _useColorScheme = require("../hooks/useColorScheme.js"); var _theme = require("../constants/theme.js"); var _themeUtils = require("../utils/themeUtils.js"); var _OxyContext = require("../context/OxyContext.js"); var _spacing = require("../constants/spacing.js"); var _jsxRuntime = require("react/jsx-runtime"); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } const AccountCenterScreen = ({ onClose, theme, navigate }) => { // Use useOxy() hook for OxyContext values const { user, logout, isLoading, sessions, isAuthenticated } = (0, _OxyContext.useOxy)(); const { t } = (0, _useI18n.useI18n)(); const colorScheme = (0, _useColorScheme.useColorScheme)(); const normalizedTheme = (0, _themeUtils.normalizeTheme)(theme); const themeStyles = (0, _useThemeStyles.useThemeStyles)(normalizedTheme, colorScheme); // AccountCenterScreen uses a slightly different light background const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2'; // Extract commonly used colors for readability - ensure colors is always defined const { textColor, secondaryBackgroundColor, borderColor, primaryColor, dangerColor, colors: themeColors } = themeStyles; const colors = themeColors || _theme.Colors[(0, _themeUtils.normalizeColorScheme)(colorScheme, normalizedTheme)]; // Memoized logout handler - prevents unnecessary re-renders const handleLogout = (0, _react.useCallback)(async () => { try { await logout(); if (onClose) { onClose(); } } catch (error) { if (__DEV__) { console.error('Logout failed:', error); } _sonner.toast.error(t('common.errors.signOutFailed') || 'There was a problem signing you out. Please try again.'); } }, [logout, onClose, t]); // Memoized confirm logout handler - prevents unnecessary re-renders const confirmLogout = (0, _react.useCallback)(() => { (0, _confirmAction.confirmAction)(t('common.confirms.signOut') || 'Are you sure you want to sign out?', handleLogout); }, [handleLogout, t]); if (!isAuthenticated) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, { style: [styles.container, { backgroundColor }], children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: [styles.message, { color: textColor }], children: t('common.status.notSignedIn') || 'Not signed in' }) }); } if (isLoading) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, { style: [styles.container, { backgroundColor, justifyContent: 'center' }], children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, { size: "large", color: primaryColor }) }); } return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, { style: [styles.container, { backgroundColor }], children: [user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileCard.default, { user: user, theme: normalizedTheme, onEditPress: () => navigate?.('AccountSettings', { activeTab: 'profile' }), onClosePress: onClose, showCloseButton: !!onClose }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, { style: styles.scrollView, contentContainerStyle: styles.scrollContainer, showsVerticalScrollIndicator: false, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { title: t('accountCenter.sections.quickActions') || 'Quick Actions', isFirst: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickActions.default, { theme: normalizedTheme, actions: (0, _react.useMemo)(() => [{ id: 'overview', icon: 'account-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') }, { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('AccountSettings') }, { id: 'sessions', icon: 'shield-check', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') }, { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate?.('PremiumSubscription') }, ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []), ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : [])], [user?.isPremium, sessions, navigate, t, colors]) }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { title: t('accountCenter.sections.accountManagement') || 'Account Management', children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSection.default, { items: (0, _react.useMemo)(() => [{ id: 'overview', icon: 'account-circle', iconColor: colors.iconSecurity, title: t('accountCenter.items.accountOverview.title') || 'Account Overview', subtitle: t('accountCenter.items.accountOverview.subtitle') || 'Complete account information', onPress: () => navigate?.('AccountOverview') }, { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.items.editProfile.title') || 'Edit Profile', subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences', onPress: () => navigate?.('AccountSettings') }, { id: 'sessions', icon: 'shield-check', iconColor: colors.iconSecurity, title: t('accountCenter.items.manageSessions.title') || 'Manage Sessions', subtitle: t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices', onPress: () => navigate?.('SessionManagement') }, { id: 'files', icon: 'folder', iconColor: colors.iconStorage, title: t('accountCenter.items.fileManagement.title') || 'File Management', subtitle: t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files', onPress: () => navigate?.('FileManagement') }, { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions', subtitle: user?.isPremium ? t('accountCenter.items.premium.manage') || 'Manage your premium plan' : t('accountCenter.items.premium.upgrade') || 'Upgrade to premium features', onPress: () => navigate?.('PremiumSubscription') }, ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.items.billing.title') || 'Billing Management', subtitle: t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices', onPress: () => navigate?.('PaymentGateway') }] : [])], [user?.isPremium, navigate, t, colors]) }) }), sessions && sessions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { title: t('accountCenter.sections.multiAccount') || 'Multi-Account', children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSection.default, { items: (0, _react.useMemo)(() => [{ id: 'switch', icon: 'account-group', iconColor: colors.iconStorage, title: t('accountCenter.items.switchAccount.title') || 'Switch Account', subtitle: t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`, onPress: () => navigate?.('AccountSwitcher') }, { id: 'add', icon: 'account-plus', iconColor: colors.iconPersonalInfo, title: t('accountCenter.items.addAccount.title') || 'Add Another Account', subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account', onPress: () => navigate?.('OxyAuth') }], [sessions.length, navigate, t, colors]) }) }), (!sessions || sessions.length <= 1) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { title: t('accountCenter.sections.addAccount') || 'Add Account', children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSection.default, { items: (0, _react.useMemo)(() => [{ id: 'add', icon: 'account-plus', iconColor: colors.iconPersonalInfo, title: t('accountCenter.items.addAccount.title') || 'Add Another Account', subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account', onPress: () => navigate?.('OxyAuth') }], [navigate, t, colors]) }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { title: t('accountCenter.sections.moreOptions') || 'More Options', children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSection.default, { items: (0, _react.useMemo)(() => [...(_reactNative.Platform.OS !== 'web' ? [{ id: 'notifications', icon: 'bell', iconColor: colors.iconStorage, title: t('accountCenter.items.notifications.title') || 'Notifications', subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings', onPress: () => navigate?.('AccountSettings', { activeTab: 'notifications' }) }] : []), { id: 'language', icon: 'translate', iconColor: colors.iconPersonalInfo, title: t('language.title') || 'Language', subtitle: t('language.subtitle') || 'Choose your preferred language', onPress: () => navigate?.('LanguageSelector') }, { id: 'help', icon: 'help-circle', iconColor: colors.iconSecurity, title: t('accountOverview.items.help.title') || 'Help & Support', subtitle: t('accountOverview.items.help.subtitle') || 'Get help and contact support', onPress: () => navigate?.('HelpSupport') }, { id: 'appinfo', icon: 'information', iconColor: '#8E8E93', title: t('accountCenter.items.appInfo.title') || 'App Information', subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details', onPress: () => navigate?.('AppInfo') }], [navigate, t, colors, _reactNative.Platform.OS]) }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section.default, { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedItem.default, { icon: "logout", iconColor: dangerColor, title: isLoading ? t('accountCenter.signingOut') || 'Signing out...' : t('common.actions.signOut') || 'Sign Out', onPress: confirmLogout, isFirst: true, isLast: true, showChevron: false, disabled: isLoading, customContent: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, { color: dangerColor, size: "small", style: { marginRight: 16 } }) : null }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, { style: styles.versionContainer, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: [styles.versionText, { color: themeStyles.isDarkTheme ? '#666666' : '#999999' }], children: t('accountCenter.version', { version: _core.packageInfo.version }) || `Version ${_core.packageInfo.version}` }) })] })] }); }; const styles = _reactNative.StyleSheet.create({ container: { flex: 1 }, scrollView: { flex: 1 }, scrollContainer: _spacing.screenContentStyle, versionContainer: { alignItems: 'center', marginTop: 20, marginBottom: 20 }, versionText: { fontSize: 12, fontFamily: _fonts.fontFamilies.inter }, message: { fontSize: 16, textAlign: 'center', marginTop: 24 } }); var _default = exports.default = AccountCenterScreen; //# sourceMappingURL=AccountCenterScreen.js.map