@finspringinnovations/fixeddepositsdk 1.0.2 → 1.0.4

package/src/components/PendingFDBottomSheet.tsx

@@ -11,7 +11,7 @@ import {
     Image,
     Platform,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
+
 import ActiveFDCard from './ActiveFDCard';
 import ActionButton from './ActionButton';
 import { useColors, useTypography, useSpacing, useTheme } from '../theme/ThemeContext';
@@ -54,28 +54,22 @@ const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
     const typography = useTypography();
     const spacing = useSpacing();
     const { themeName } = useTheme();
+
     const styles = createStyles(colors, typography, spacing, themeName);
 
     return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="slide"
-            onRequestClose={onClose}
-        >
+        <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
             <View style={styles.overlay}>
                 <View style={styles.bottomSheet}>
-                    <SafeAreaView style={styles.safeArea}>
+                    <SafeAreaView>
                         {/* Header */}
                         <View style={styles.header}>
                             <View style={styles.headerContent}>
                                 <Text style={styles.title}>
                                     Please Wait! You also have a pending journey with progress saved:
                                 </Text>
-                                <TouchableOpacity
-                                    style={styles.closeButton}
-                                    onPress={onClose}
-                                >
+
+                                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                                     <Image
                                         source={{ uri: base64Images.cross }}
                                         style={{ width: 14, height: 14 }}
@@ -85,11 +79,10 @@ const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
                             </View>
                         </View>
 
-                        {/* Pending FDs Section */}
+                        {/* Content */}
                         <View style={styles.content}>
                             <Text style={styles.sectionTitle}>Pending FDs</Text>
 
-                            {/* Active FD Card */}
                             <ActiveFDCard
                                 name={pendingFDData.name}
                                 invested={pendingFDData.invested}
@@ -99,9 +92,14 @@ const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
                                 logoType={pendingFDData.logoType}
                             />
 
-                            {/* Action Buttons */}
+                            <View style={{ height: 24 }} />
+
+                            {/* Book New */}
                             <TouchableOpacity
-                                style={[styles.bookNewButton, isBookingNewLoading && styles.disabledButton]}
+                                style={[
+                                    styles.bookNewButton,
+                                    isBookingNewLoading && styles.disabledButton,
+                                ]}
                                 onPress={onBookNew}
                                 disabled={isBookingNewLoading}
                             >
@@ -119,21 +117,21 @@ const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
                                 )}
                             </TouchableOpacity>
 
-                            {themeName === 'dark' ? (
-                                <ActionButton
-                                    title="Continue"
-                                    onPress={onContinue}
-                                    variant="primary"
-                                    style={styles.continueButtonWrapper}
-                                />
-                            ) : (
-                                <TouchableOpacity
-                                    style={styles.continueButton}
-                                    onPress={onContinue}
-                                >
-                                    <Text style={styles.continueButtonText}>Continue</Text>
-                                </TouchableOpacity>
-                            )}
+                            {/* Footer */}
+                            <View style={styles.footer}>
+                                {themeName === 'dark' ? (
+                                    <ActionButton
+                                        title="Continue"
+                                        onPress={onContinue}
+                                        variant="primary"
+                                        style={styles.continueButtonWrapper}
+                                    />
+                                ) : (
+                                    <TouchableOpacity style={styles.continueButton} onPress={onContinue}>
+                                        <Text style={styles.continueButtonText}>Continue</Text>
+                                    </TouchableOpacity>
+                                )}
+                            </View>
                         </View>
                     </SafeAreaView>
                 </View>
@@ -142,96 +140,126 @@ const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
     );
 };
 
-const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeName: string) => StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'flex-end',
-    },
-    bottomSheet: {
-        padding: spacing.sm,
-        backgroundColor: themeName === 'dark' ? colors.background : 'white',
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        borderWidth: themeName === 'dark' ? 1 : 0,
-        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
-        maxHeight: Dimensions.get('window').height * 0.8,
-        minHeight: Platform.OS === 'ios' ? 430 : 400,
-    },
-    safeArea: {
-        flex: 1,
-    },
-    header: {
-        paddingHorizontal: spacing.lg,
-        paddingTop: spacing.md,
-        paddingBottom: spacing.sm,
-    },
-    headerContent: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-    },
-    title: {
-        fontSize: 17,
-        fontWeight: '500',
-        color: themeName === 'dark' ? colors.labelColor : '#333',
-        flex: 1,
-        marginRight: spacing.md,
-        lineHeight: 24,
-    },
-    closeButton: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: '#f5f5f5',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    content: {
-        flex: 1,
-        paddingHorizontal: spacing.lg,
-        paddingTop: spacing.lg,
-        paddingBottom: Platform.OS === 'ios' ? 20 : 0,
-    },
-    sectionTitle: {
-        ...typography.styles.h3,
-        color: themeName === 'dark' ? colors.labelColor : '#333',
-        marginBottom: spacing.md,
-    },
-    bookNewButton: {
-        marginTop: spacing.xxxl,
-        marginBottom: spacing.xxxl,
-        alignItems: 'center',
-    },
-    bookNewText: {
-        ...typography.styles.body2,
-        color: themeName === 'dark' ? colors.labelColor : '#000000',
-    },
-    disabledButton: {
-        opacity: 0.6,
-    },
-    loadingContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    continueButtonWrapper: {
-        marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
-    },
-    continueButton: {
-        height: 50,
-        backgroundColor: '#007AFF',
-        borderRadius: 25,
-        paddingHorizontal: spacing.lg,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
-    },
-    continueButtonText: {
-        ...typography.styles.button,
-        color: 'white',
-        fontWeight: '600',
-    },
-});
+const createStyles = (
+    colors: ColorScheme,
+    typography: any,
+    spacing: any,
+    themeName: string
+) =>
+    StyleSheet.create({
+        overlay: {
+            flex: 1,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            justifyContent: 'flex-end',
+        },
+
+        bottomSheet: {
+            padding: spacing.sm,
+            backgroundColor: themeName === 'dark' ? colors.background : 'white',
+            borderTopLeftRadius: 20,
+            borderTopRightRadius: 20,
+            borderWidth: themeName === 'dark' ? 1 : 0,
+            borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
+            maxHeight: Dimensions.get('window').height * 0.8,
+        },
+
+        header: {
+            paddingHorizontal: spacing.lg,
+            paddingTop: spacing.md,
+            paddingBottom: spacing.sm,
+        },
+
+        headerContent: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+        },
+
+        title: {
+            fontSize: 15,
+            fontWeight: '500',
+            color: themeName === 'dark' ? colors.labelColor : '#333',
+            flex: 1,
+            marginRight: spacing.md,
+            lineHeight: 24,
+        },
+
+        closeButton: {
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            backgroundColor: '#f5f5f5',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+
+        content: {
+            paddingHorizontal: spacing.lg,
+            paddingTop: spacing.lg,
+            paddingBottom: Platform.OS === 'ios' ? 20 : spacing.lg,
+        },
+
+        sectionTitle: {
+            ...typography.styles.h4,
+            color: themeName === 'dark' ? colors.labelColor : '#333',
+            marginBottom: spacing.md,
+        },
+
+        bookNewButton: {
+            marginTop: spacing.xl,
+            marginBottom: spacing.xl,
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: 12,
+            paddingHorizontal: spacing.lg,
+            borderWidth: 1,
+            borderColor: themeName === 'dark' ? colors.labelColor : '#333',
+            borderRadius: themeName === 'dark' ? 10 : 30,
+            width: 330,
+            alignSelf: 'center',
+        },
+
+        bookNewText: {
+            ...typography.styles.buttonSmall,
+            color: themeName === 'dark' ? colors.labelColor : '#000',
+            // fontWeight: '500',
+            // fontSize: 14,
+            // fontFamily: 'poppins.medium',
+        },
+
+        disabledButton: {
+            opacity: 0.6,
+        },
+
+        loadingContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+
+        footer: {
+            paddingTop: spacing.sm,
+        },
+
+        continueButtonWrapper: {
+            marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+        },
+
+        continueButton: {
+            height: 50,
+            backgroundColor: '#007AFF',
+            borderRadius: 25,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+        },
+
+        continueButtonText: {
+            ...typography.styles.button,
+            color: '#fff',
+            fontWeight: '600',
+            fontSize: 16,
+        },
+    });
 
-export default PendingFDBottomSheet;
+export default PendingFDBottomSheet;