@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

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

@@ -0,0 +1,468 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 { useTheme } from '../../../theme';
+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 } = useTheme(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];
+}