oneticket-sdk-vi 1.0.0

package/src/components/common/DropdownComponent/DropdownComponent.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { StyleSheet, View, Animated, TextStyle, ViewStyle, TextInput } from 'react-native';
+import { Dropdown } from 'react-native-element-dropdown';
+import { useTheme } from '../../../theme/ThemeProvider';
+
+interface DropdownComponentProps {
+  isOpen?: boolean;
+  data: any[];
+  value: any | null;
+  enableLabelAnimation?: boolean; // New prop to enable/disable label animation
+  enableSearch?: boolean; // New prop to enable/disable search functionality
+  placeholder?: string;
+  searchPlaceholder?: string;
+  maxHeight?: number;
+  dropdownStyle?: ViewStyle;
+  placeholderStyle?: TextStyle;
+  selectedTextStyle?: TextStyle;
+  iconStyle?: any;
+  inputSearchStyle?: TextStyle;
+  containerStyle?: TextStyle;
+  itemTextStyle?: TextStyle;
+  onChange: (item: any) => void;
+  isDisabled?: boolean;
+}
+
+const DropdownComponent: React.FC<DropdownComponentProps> = ({
+  isOpen = false,
+  data,
+  value,
+  enableLabelAnimation = true,
+  enableSearch = true,
+  placeholder = '',
+  searchPlaceholder = 'Search...',
+  maxHeight = 300,
+  dropdownStyle,
+  placeholderStyle,
+  selectedTextStyle,
+  iconStyle,
+  inputSearchStyle,
+  containerStyle,
+  itemTextStyle,
+  onChange,
+  isDisabled,
+}) => {
+  const { theme } = useTheme();
+  const [isFocus, setIsFocus] = useState(isOpen);
+  const dropdownRef = useRef<any>(null);
+  const [search, setSearch] = useState('');
+
+  const getLabelField = () => data[0]?.label ? 'label' : 'name';
+  const getValueField = () => data[0]?.value ? 'value' : 'name';
+  // const searchInputRef = useRef<TextInput>(null);
+
+  // const filteredStations = data.filter(st => {
+  //   if (st.name.toLowerCase().trim().includes(search.toLowerCase().trim())) {
+  //     return true;
+  //   } else {
+  //     return false;
+  //   }
+  // });
+
+  useEffect(() => {
+    if (enableSearch && isFocus) {
+      setTimeout(() => {
+        // searchInputRef.current?.focus();
+      }, 500);
+    }
+  }, [isFocus, enableSearch]);
+
+  useEffect(() => {
+    if (isOpen) {
+      dropdownRef.current?.open();
+      setIsFocus(true);
+    } else {
+      dropdownRef.current?.close();
+      setIsFocus(false);
+    }
+  }, [isOpen]);
+
+  const styles = StyleSheet.create({
+    container: {
+      position: 'relative',
+    },
+    dropdown: {
+      height: 50,
+      // borderColor: '#a1a1aa', // NativeBase input border color when not focused
+      borderColor: theme.colors.borderDark, // NativeBase input border color when not focused
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingHorizontal: 8,
+      color: theme.colors.text,
+    },
+    label: {
+      position: 'absolute',
+      // backgroundColor: '#FFF',
+      backgroundColor: theme.colors.background,
+      left: 18,
+      bottom: 40,
+      zIndex: 999,
+      paddingHorizontal: 4,
+      fontSize: 14,
+      color: theme.colors.gray[500], // NativeBase default label color
+    },
+    placeholderStyle: {
+      fontSize: 14,
+      paddingLeft: 4,
+      color: theme.colors.textTertiary, // NativeBase default placeholder color
+    },
+    selectedTextStyle: {
+      fontSize: 14,
+      paddingLeft: 6,
+      color: theme.colors.text, // NativeBase input text color
+    },
+    iconStyle: {
+      width: 20,
+      height: 20,
+    },
+    inputSearchStyle: {
+      height: 45,
+      borderRadius: 8,
+      fontSize: 14,
+      color: theme.colors.text, // Text color for search input
+    },
+    containerStyle: {
+      backgroundColor: theme.colors.backdrop,
+      borderRadius: 8,
+      shadowOpacity: 1,
+      elevation: 8,
+    },
+    itemTextStyle: {
+      color: theme.colors.text,
+      fontSize: 14
+    },
+  });
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Dropdown
+        style={[
+          styles.dropdown,
+          dropdownStyle,
+          isFocus && { borderColor: theme.colors.primary[500] },
+          isDisabled && { borderColor: theme.colors.gray[200], backgroundColor: theme.colors.disabled }
+        ]}
+        ref={dropdownRef}
+
+        labelField={getLabelField()}
+        valueField={getValueField()}
+
+        placeholderStyle={[styles.placeholderStyle, placeholderStyle]}
+        selectedTextStyle={[styles.selectedTextStyle, selectedTextStyle]}
+        inputSearchStyle={[styles.inputSearchStyle, inputSearchStyle]}
+        iconStyle={[styles.iconStyle, iconStyle]}
+        containerStyle={[styles.containerStyle, containerStyle]}
+        itemTextStyle={[styles.itemTextStyle, itemTextStyle]}
+        showsVerticalScrollIndicator
+        data={data}
+        search={enableSearch}
+        maxHeight={maxHeight}
+        // labelField="name"
+        // valueField="name"
+        placeholder={
+          enableLabelAnimation ? (!isFocus ? placeholder : '...') : placeholder
+        }
+        value={value}
+        disable={isDisabled}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={(item: any) => {
+          setIsFocus(false);
+          onChange(item);
+          setSearch('');
+        }}
+        renderInputSearch={(searchProps) => (
+          <TextInput
+            value={search}
+            onChangeText={val => setSearch(val)}
+            placeholder={searchPlaceholder}
+            // ref={searchInputRef}
+            {...searchProps}
+            style={[styles.inputSearchStyle, inputSearchStyle]}
+          />
+        )}
+      />
+    </View>
+  );
+};
+
+export default DropdownComponent;

package/src/components/common/DropdownComponent/MultiSelectDropdown.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { View, Modal, Pressable, FlatList, StyleSheet } from 'react-native';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import { Checkbox } from '../../../components/common/Checkbox/Checkbox';
+import { Button } from '../../../components/common/Button/Button';
+import ChevronDownIcon from '../../../assets/icons/ChevronDownIcon';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface Option {
+    label: string;
+    value: string;
+}
+
+interface MultiSelectDropdownProps {
+    data: Option[];
+    placeholder: string;
+    selectedLabels: string[];
+    selectedValues: string[];
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+}
+
+const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
+    data,
+    placeholder,
+    selectedLabels,
+    selectedValues,
+    onValueChange,
+    disabled = false
+}) => {
+    const { theme } = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+        if (data.length === 1) {
+            const onlyOption = data[0];
+            if (!selectedValues.includes(onlyOption.value)) {
+                onValueChange(onlyOption.value);
+            }
+        }
+    }, [data, selectedValues, onValueChange]);
+
+    return (
+        <View>
+            <Pressable
+                onPress={() => !disabled && setIsOpen(true)}
+                disabled={disabled || data.length === 1}
+            >
+                <View style={[
+                    styles.dropdownContainer,
+                    {
+                        borderColor: disabled ? theme.colors.gray[200] : theme.colors.borderDark,
+                        backgroundColor: disabled ? theme.colors.disabled : theme.colors.background
+                    }
+                ]}>
+                    <CustomText
+                        variant="body1"
+                        style={[
+                            styles.dropdownText,
+                            {
+                                color: disabled ? theme.colors.textTertiary :
+                                    selectedLabels.length ? theme.colors.text : theme.colors.textTertiary
+                            }
+                        ]}
+                    >
+                        {selectedLabels.length
+                            ? selectedLabels.join(', ')
+                            : data.length === 1
+                                ? data[0].label
+                                : placeholder}
+                    </CustomText>
+                    {data.length > 1 && !disabled && (
+                        <ChevronDownIcon size={ms(16)} color={theme.colors.textTertiary} />
+                    )}
+                </View>
+            </Pressable>
+
+            {data.length > 1 && (
+                <Modal
+                    visible={isOpen}
+                    transparent={true}
+                    animationType="fade"
+                    onRequestClose={() => setIsOpen(false)}
+                >
+                    <View style={styles.modalOverlay}>
+                        <View style={[
+                            styles.modalContent,
+                            { backgroundColor: theme.colors.backdrop, shadowColor: theme.colors.shadow }
+                        ]}>
+                            <CustomText variant="labelLarge" style={styles.modalTitle}>
+                                Select Options
+                            </CustomText>
+                            <FlatList
+                                data={data}
+                                keyExtractor={(item) => item.value}
+                                renderItem={({ item }) => (
+                                    <Pressable style={styles.checkboxItem} onPress={() => onValueChange(item.value)}>
+                                        <Checkbox
+                                            value={selectedValues.includes(item.value)}
+                                            onValueChange={() => onValueChange(item.value)}
+                                            size={ms(18)}
+                                            disabled={disabled}
+                                        />
+                                        <CustomText variant="body1" style={styles.checkboxLabel}>
+                                            {item.label}
+                                        </CustomText>
+                                    </Pressable>
+                                )}
+                                contentContainerStyle={styles.listContent}
+                            />
+                            <Button
+                                variant="primary"
+                                style={styles.confirmButton}
+                                onPress={() => setIsOpen(false)}
+                            >
+                                Confirm
+                            </Button>
+                        </View>
+                    </View>
+                </Modal>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    dropdownContainer: {
+        borderWidth: 1,
+        borderRadius: ms(8),
+        paddingVertical: mvs(12),
+        paddingLeft: ms(12),
+        paddingRight: ms(8),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: mvs(48),
+    },
+    dropdownText: {
+        flex: 1,
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    },
+    modalContent: {
+        width: '90%',
+        maxHeight: '70%',
+        borderRadius: ms(12),
+        padding: ms(16),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: ms(4),
+        elevation: 5,
+    },
+    modalTitle: {
+        fontWeight: 'bold',
+        marginBottom: mvs(16),
+    },
+    listContent: {
+        paddingBottom: mvs(8),
+    },
+    checkboxItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: mvs(8),
+    },
+    checkboxLabel: {
+        flex: 1,
+        marginLeft: ms(8),
+    },
+    confirmButton: {
+        height: mvs(50),
+        marginTop: mvs(16),
+    },
+});
+
+export default MultiSelectDropdown;

package/src/components/common/EmptyState/EmptyState.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { CustomText } from '../Text/CustomText';
+
+interface EmptyStateProps {
+    image: any;
+    title: string;
+    description?: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ image, title, description }) => {
+    const { theme } = useTheme();
+
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: mvs(theme.spacing.xl),
+        },
+        image: {
+            width: ms(300),
+            height: mvs(250),
+            alignSelf: 'center',
+        },
+        title: {
+            color: theme.colors.primary[500],
+            marginTop: mvs(theme.spacing.m),
+        },
+        description: {
+            color: theme.colors.textSecondary,
+            marginTop: mvs(theme.spacing.s),
+            textAlign: 'center',
+            paddingHorizontal: ms(theme.spacing.xl),
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <Image source={image} style={styles.image} resizeMode="contain" />
+            <CustomText variant='heading3' style={styles.title}>{title}</CustomText>
+            {description && <CustomText variant='body1' style={styles.description}>{description}</CustomText>}
+        </View>
+    );
+};
+
+export default EmptyState;

package/src/components/common/Header/Header.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    ActivityIndicator,
+    Platform
+} from 'react-native';
+import BackIcon from '../../../assets/icons/BackIcon';
+import { useNavigation } from '@react-navigation/native';
+import HomeIcon from '../../../assets/icons/HomeIcon';
+import { MetroScreens, MetroStackNavigationProp } from '../../../navigation/metro/MetroStack';
+import { useFetchCurrectCity } from '../../../services/apis/city/hooks';
+import { MetroWithTabsScreens, MetroWithTabsStackNavigationProp } from '../../../navigation/metro/MetroWithTabsStack';
+import RefreshIcon from '../../../assets/icons/RefreshIcon';
+import { Avatar } from '../Avatar/Avatar';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface HeaderProps {
+    title?: string;
+    showBackButton?: boolean;
+    showHomeButton?: boolean;
+    showChooseCity?: boolean;
+    chatHeader?: boolean;
+    onBackPress?: () => void;
+    onRefresh?: () => void;
+    isRefetching?: boolean;
+    rightComponent?: React.ReactNode;
+    leftComponent?: React.ReactNode;
+}
+
+const Header: React.FC<HeaderProps> = ({
+    title,
+    showBackButton = true,
+    showHomeButton = true,
+    showChooseCity = false,
+    chatHeader = false,
+    onBackPress,
+    onRefresh,
+    isRefetching,
+    rightComponent,
+    leftComponent,
+}) => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroStackNavigationProp & MetroWithTabsStackNavigationProp>();
+    const { data: currectCity, isLoading: currectCityLoading } = useFetchCurrectCity({});
+
+    const handleGoBack = () => {
+        if (onBackPress) {
+            onBackPress();
+        } else {
+            goBack();
+        }
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            zIndex: 9999,
+            paddingHorizontal: ms(16),
+            paddingBottom: mvs(8),
+            paddingTop: Platform.OS === 'ios' ? mvs(12) : mvs(12),
+            backgroundColor: theme.colors.background,
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 4,
+            flexDirection: 'row',
+            justifyContent: chatHeader ? 'flex-start' : 'space-between',
+            alignItems: 'center',
+        },
+        chatHeaderContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        leftContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        avatarContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginLeft: ms(12),
+        },
+        avatarTextContainer: {
+            marginLeft: ms(12),
+        },
+        title: {
+            fontSize: ms(18),
+            fontWeight: 'bold',
+            color: theme.colors.text,
+        },
+        subtitle: {
+            fontSize: ms(14),
+            color: theme.colors.textSecondary,
+        },
+        button: {
+            paddingHorizontal: ms(8),
+            paddingVertical: mvs(4),
+            borderRadius: ms(20),
+        },
+        pressedButton: {
+            backgroundColor: theme.colors.surfaceVariant,
+        },
+        cityButton: {
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: ms(20),
+            paddingHorizontal: ms(12),
+            paddingVertical: mvs(6),
+            marginLeft: ms(-40),
+            marginRight: ms(-8)
+        },
+        pressedCityButton: {
+            backgroundColor: theme.colors.surfaceVariant,
+            borderColor: theme.colors.primary[300],
+        },
+        cityButtonText: {
+            fontSize: ms(12),
+            color: theme.colors.text,
+        },
+        emptySpace: {
+            width: ms(40),
+            height: mvs(40),
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            {/* Chat Header Style */}
+            {chatHeader ? (
+                <View style={styles.chatHeaderContainer}>
+                    <View style={styles.leftContainer}>
+                        <Pressable
+                            onPress={handleGoBack}
+                            style={({ pressed }) => [
+                                styles.button,
+                                pressed && styles.pressedButton
+                            ]}
+                        >
+                            <BackIcon size={ms(20)} color={theme.colors.text} />
+                        </Pressable>
+                        <View style={styles.avatarContainer}>
+                            <Avatar
+                                size={mvs(40)}
+                                initials="SA"
+                                backgroundColor={theme.colors.primary[500]}
+                            />
+                            <View style={styles.avatarTextContainer}>
+                                <Text style={styles.title}>Support Agent</Text>
+                                <Text style={styles.subtitle}>Online</Text>
+                            </View>
+                        </View>
+                    </View>
+                    <Pressable
+                        onPress={onRefresh}
+                        disabled={isRefetching}
+                        style={({ pressed }) => [
+                            styles.button,
+                            pressed && styles.pressedButton
+                        ]}
+                    >
+                        {isRefetching ? (
+                            <ActivityIndicator size="small" color={theme.colors.primary[500]} />
+                        ) : (
+                            <RefreshIcon size={ms(23)} color={theme.colors.text} />
+                        )}
+                    </Pressable>
+                </View>
+            ) : (
+                <>
+                    {/* Left Component or Back Button */}
+                    {leftComponent ? (
+                        <View>{leftComponent}</View>
+                    ) : showBackButton ? (
+                        <Pressable
+                            onPress={handleGoBack}
+                            style={({ pressed }) => [
+                                styles.button,
+                                pressed && styles.pressedButton
+                            ]}
+                        >
+                            <BackIcon size={ms(24)} color={theme.colors.text} />
+                        </Pressable>
+                    ) : (
+                        <View style={styles.emptySpace} />
+                    )}
+
+                    {/* Title */}
+                    {title ? (
+                        <Text style={styles.title}>{title}</Text>
+                    ) : (
+                        <View style={{ width: ms(32) }} />
+                    )}
+
+                    {/* Right Component or Default Options */}
+                    {rightComponent ? (
+                        <View>{rightComponent}</View>
+                    ) : showHomeButton ? (
+                        <Pressable
+                            onPress={() => navigate(MetroWithTabsScreens.SelectStations, {})}
+                            style={({ pressed }) => [
+                                styles.button,
+                                pressed && styles.pressedButton
+                            ]}
+                        >
+                            <HomeIcon size={ms(28)} color={theme.colors.text} />
+                        </Pressable>
+                    ) : showChooseCity ? (
+                        <Pressable
+                            style={({ pressed }) => [
+                                styles.cityButton,
+                                pressed && styles.pressedCityButton
+                            ]}
+                            onPress={() => navigate(MetroScreens.MetroSelection)}
+                        >
+                            {currectCityLoading ? (
+                                <ActivityIndicator size="small" color={theme.colors.primary[500]} />
+                            ) : (
+                                <Text style={styles.cityButtonText}>
+                                    {currectCity?.currectCity || 'Choose City'}
+                                </Text>
+                            )}
+                        </Pressable>
+                    ) : (
+                        <View style={styles.emptySpace} />
+                    )}
+                </>
+            )}
+        </View>
+    );
+};
+
+export default Header;