@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -1,468 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 30 Jun 2025 at 05:00 PM
- */
-
-import React, { memo, useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  FlatList,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  Alert,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../../Text';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import AppHeader from '../../Headers/AppHeader';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import type { ThemeOverride } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { ScanLine } from 'lucide-react-native';
-
-type IUserLocation = {
-  country: string | null;
-  state: string | null;
-  city: string | null;
-};
-type IDeviceInfo = {
-  name: string | null;
-  browser: string | null;
-  location: IUserLocation | null;
-};
-type ISessions = {
-  id: string;
-  token: string;
-  refreshToken: string | null;
-  fingerprint: string;
-  deviceId: string | null;
-  lastActivity?: Date;
-  deviceInfo: IDeviceInfo | null;
-};
-
-type TextLabels = {
-  thisDevice?: string;
-  logOut?: string;
-  lastActivePrefix?: string;
-  noSessions?: string;
-  loadingLogoutText?: string;
-  cannotLogoutThisDeviceTitle?: string;
-  cannotLogoutThisDeviceMessage?: string;
-};
-
-type IDeviceSessionsProps = {
-  sessions: ISessions[];
-  activeSessionId?: string;
-  error?: string;
-  onLogout: ({ session }: { session: ISessions }) => void;
-  onBackPress?: () => void;
-  onQrLoginPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  title?: string;
-  renderLogoutButton?: ({ session }: { session: ISessions }) => React.ReactNode;
-  renderContent?: ({
-    session,
-    isActive,
-  }: {
-    session: ISessions;
-    isActive: boolean;
-  }) => React.ReactNode | null;
-  textLabels?: TextLabels;
-  headerStyle?: StyleProp<ViewStyle>;
-  headerTitleAlign?: 'left' | 'center';
-  headerTitleStyle?: StyleProp<any>;
-  renderHeader?: () => React.ReactNode;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  isLoadingLogout?: boolean;
-};
-
-const DeviceSessionsComponent: React.FC<IDeviceSessionsProps> = ({
-  sessions,
-  activeSessionId,
-  onLogout,
-  onBackPress = () => {},
-  onQrLoginPress,
-  title = 'Manage Devices',
-  style,
-  error,
-  renderLogoutButton,
-  renderContent,
-  textLabels,
-  headerStyle = {},
-  headerTitleAlign = 'center',
-  headerTitleStyle,
-  renderHeader,
-  theme,
-  isLoading,
-  isLoadingLogout,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const colors = appliedTheme.colors;
-
-  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(
-    null
-  );
-
-  const {
-    thisDevice = 'This Device',
-    logOut = 'LOG OUT',
-    lastActivePrefix = 'Last active:',
-    noSessions = 'No active sessions found.',
-    loadingLogoutText = 'Logging out...',
-    cannotLogoutThisDeviceTitle = '⚠️ Cannot Logout',
-    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.',
-  } = textLabels || {};
-
-  const handleLogoutPress = useCallback(
-    (item: ISessions) => {
-      if (item.id === activeSessionId) {
-        Alert.alert(
-          cannotLogoutThisDeviceTitle,
-          cannotLogoutThisDeviceMessage,
-          [{ text: 'Cancel', style: 'cancel' }],
-          {
-            cancelable: true,
-          }
-        );
-        return;
-      }
-      setLogoutSessionId(item.id);
-      onLogout({ session: item });
-    },
-    [
-      activeSessionId,
-      cannotLogoutThisDeviceTitle,
-      cannotLogoutThisDeviceMessage,
-      onLogout,
-    ]
-  );
-
-  const renderItem = useCallback(
-    ({ item }: { item: ISessions }): React.ReactElement | null => {
-      const isActive = item?.id === activeSessionId;
-      const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
-      if (renderContent) {
-        return (
-          (renderContent({
-            session: item,
-            isActive,
-          }) as React.ReactElement) ?? null
-        );
-      }
-
-      const { name = 'Device', browser, location } = item.deviceInfo || {};
-      const hasLocation =
-        location?.city || location?.state || location?.country;
-
-      return (
-        <View
-          style={[
-            styles.deviceRow,
-            {
-              backgroundColor: colors.surfaceVariant,
-              borderColor: colors.outlineVariant ?? colors.outline,
-              shadowColor: colors.shadow ?? '#000',
-            },
-          ]}
-        >
-          <View style={styles.deviceInfo}>
-            {(name || isActive) && (
-              <View style={styles.deviceRowHeader}>
-                {name && (
-                  <Text
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                    style={[styles.deviceName, { color: colors.onSurface }]}
-                  >
-                    {name}
-                  </Text>
-                )}
-                {isActive && (
-                  <View
-                    style={[styles.badge, { backgroundColor: colors.button }]}
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={[styles.badgeText, { color: colors.buttonText }]}
-                    >
-                      {thisDevice}
-                    </Text>
-                  </View>
-                )}
-              </View>
-            )}
-
-            {(browser || hasLocation) && (
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
-              >
-                {browser}
-                {browser && hasLocation ? ' · ' : ''}
-                {hasLocation &&
-                  [location?.city, location?.state, location?.country]
-                    .filter(Boolean)
-                    .join(', ')}
-              </Text>
-            )}
-
-            {item?.lastActivity && (
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
-              >
-                {lastActivePrefix}{' '}
-                {new Date(item.lastActivity).toLocaleString()}
-              </Text>
-            )}
-          </View>
-
-          {renderLogoutButton ? (
-            renderLogoutButton({
-              session: item,
-            })
-          ) : (
-            <TouchableOpacity
-              style={[styles.logoutButton, { borderColor: colors.border }]}
-              disabled={isLoggingOut}
-              activeOpacity={0.7}
-              onPress={() => handleLogoutPress(item)}
-            >
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={[styles.logoutText, { color: colors.primary }]}
-              >
-                {isLoggingOut ? loadingLogoutText : logOut}
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      );
-    },
-    [
-      activeSessionId,
-      isLoadingLogout,
-      logoutSessionId,
-      renderContent,
-      colors,
-      thisDevice,
-      lastActivePrefix,
-      renderLogoutButton,
-      loadingLogoutText,
-      logOut,
-      handleLogoutPress,
-    ]
-  );
-
-  const keyExtractor = useCallback((item: ISessions) => item.id, []);
-
-  const renderSkeleton = () => {
-    return (
-      <View style={styles.listContent}>
-        {[...Array(4)].map((_, index) => (
-          <View
-            key={index}
-            style={{
-              borderWidth: StyleSheet.hairlineWidth,
-              borderColor: colors.outlineVariant ?? colors.outline,
-              borderRadius: scale(10),
-              padding: scale(12),
-              marginBottom: verticalScale(12),
-              backgroundColor: colors.surfaceVariant,
-            }}
-          >
-            <SkeletonPlaceholder
-              backgroundColor={colors.skeletonBaseColor || '#E1E9EE'}
-              highlightColor={colors.skeletonHighlightColor || '#F2F8FC'}
-              borderRadius={scale(8)}
-            >
-              <SkeletonPlaceholder.Item
-                flexDirection="row"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <SkeletonPlaceholder.Item flex={1} paddingRight={scale(12)}>
-                  <SkeletonPlaceholder.Item
-                    width="60%"
-                    height={scale(14)}
-                    borderRadius={scale(4)}
-                    marginBottom={scale(6)}
-                  />
-                  <SkeletonPlaceholder.Item
-                    width="80%"
-                    height={scale(10)}
-                    borderRadius={scale(4)}
-                    marginBottom={scale(4)}
-                  />
-                  <SkeletonPlaceholder.Item
-                    width="50%"
-                    height={scale(10)}
-                    borderRadius={scale(4)}
-                  />
-                </SkeletonPlaceholder.Item>
-
-                <SkeletonPlaceholder.Item
-                  width={scale(80)}
-                  height={verticalScale(30)}
-                  borderRadius={scale(6)}
-                />
-              </SkeletonPlaceholder.Item>
-            </SkeletonPlaceholder>
-          </View>
-        ))}
-      </View>
-    );
-  };
-  const sortedSessions = useMemo(() => {
-    if (!sessions?.length) return [];
-    return [...sessions].sort((a, b) => {
-      if (a.id === activeSessionId) return -1;
-      if (b.id === activeSessionId) return 1;
-      return 0;
-    });
-  }, [sessions, activeSessionId]);
-  return (
-    <View
-      style={[styles.container, { backgroundColor: colors.background }, style]}
-    >
-      {renderHeader ? (
-        renderHeader()
-      ) : (
-        <AppHeader
-          title={title}
-          onBackPress={onBackPress}
-          onRightPress={onQrLoginPress}
-          rightIcon={
-            <ScanLine
-              size={22}
-              strokeWidth={2}
-              color={colors.onSurfaceVariant}
-            />
-          }
-          theme={theme}
-          titleAlign={headerTitleAlign}
-          style={headerStyle}
-          titleStyle={headerTitleStyle}
-        />
-      )}
-
-      {isLoading ? (
-        renderSkeleton()
-      ) : (
-        <FlatList
-          data={sortedSessions}
-          keyExtractor={keyExtractor}
-          renderItem={renderItem}
-          contentContainerStyle={styles.listContent}
-          ListEmptyComponent={
-            <View style={styles.emptyWrapper}>
-              <Text
-                numberOfLines={2}
-                ellipsizeMode="tail"
-                style={[styles.emptyText, { color: colors.onSurfaceVariant }]}
-              >
-                {error || noSessions}
-              </Text>
-            </View>
-          }
-        />
-      )}
-    </View>
-  );
-};
-
-export const DeviceSessions = memo(DeviceSessionsComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  listContent: {
-    paddingHorizontal: scale(16),
-    paddingVertical: verticalScale(12),
-  },
-  deviceRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderWidth: StyleSheet.hairlineWidth,
-    padding: scale(12),
-    borderRadius: scale(10),
-    marginBottom: verticalScale(12),
-    elevation: 2,
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 4,
-  },
-  deviceInfo: {
-    flex: 1,
-    paddingRight: scale(12),
-  },
-  deviceRowHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: scale(8),
-    rowGap: verticalScale(2),
-    flexWrap: 'wrap',
-    marginBottom: scale(4),
-  },
-  deviceName: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    flexShrink: 1,
-    maxWidth: '80%',
-  },
-  deviceMeta: {
-    fontSize: RFValue(9),
-    marginTop: scale(2),
-    flexShrink: 1,
-  },
-  logoutButton: {
-    paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(6),
-    borderRadius: scale(6),
-    minWidth: scale(80),
-    borderWidth: scale(1.5),
-    alignItems: 'center',
-  },
-  logoutText: {
-    fontSize: RFValue(10),
-    fontWeight: '600',
-  },
-  badge: {
-    paddingHorizontal: scale(8),
-    paddingVertical: verticalScale(2),
-    borderRadius: scale(6),
-  },
-  badgeText: {
-    fontSize: RFValue(9),
-    fontWeight: '500',
-    maxWidth: scale(100),
-    flexShrink: 1,
-  },
-  emptyWrapper: {
-    paddingVertical: verticalScale(40),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyText: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-  },
-  skeletonLine: {
-    borderRadius: scale(4),
-    backgroundColor: '#ccc',
-  },
-});
-
-export namespace DeviceSessions {
-  export type Props = IDeviceSessionsProps;
-  export type Data = Props['sessions'];
-  export type Item = Props['sessions'][number];
-}