fairsure-checkout-sdk 1.0.0

package/dist/components/PurchaseModal.js

@@ -0,0 +1,415 @@
+// import { AntDesign } from "@expo/vector-icons";
+// import { useTheme } from "@react-navigation/core";
+// import React, { ReactElement, useEffect, useRef } from "react";
+// import {
+//   Animated,
+//   Easing,
+//   FlatList,
+//   Modal,
+//   PanResponder,
+//   Pressable,
+//   StyleSheet,
+//   TouchableOpacity,
+//   View,
+// } from "react-native";
+// import { ThemedText } from "../themed-text";
+// import { Spinner } from "../ui/buttons/spinner";
+// interface FilterItem {
+//   key: string;
+//   render: () => ReactElement | null;
+// }
+// interface PurchaseModalProps {
+//   visible: boolean;
+//   loading?: boolean;
+//   title?: string;
+//   description?: string;
+//   filters: FilterItem[];
+//   onClose: () => void;
+//   onApply?: () => void;
+//   onReset?: () => void;
+// }
+// const PurchaseModal: React.FC<PurchaseModalProps> = ({
+//   visible,
+//   title = "Buy Airtime",
+//   description,
+//   filters,
+//   loading,
+//   onClose,
+//   onApply,
+//   onReset,
+// }) => {
+//   const { dark } = useTheme();
+//   const translateY = useRef(new Animated.Value(400)).current;
+//   const backdropOpacity = useRef(new Animated.Value(0)).current;
+//   const [internalVisible, setInternalVisible] = React.useState(visible);
+//   useEffect(() => {
+//     if (visible) {
+//       setInternalVisible(true);
+//       // 🔑 Reset position BEFORE animating
+//       translateY.setValue(400);
+//       backdropOpacity.setValue(0);
+//       Animated.parallel([
+//         Animated.timing(translateY, {
+//           toValue: 0,
+//           duration: 350,
+//           easing: Easing.out(Easing.ease),
+//           useNativeDriver: true,
+//         }),
+//         Animated.timing(backdropOpacity, {
+//           toValue: 1,
+//           duration: 250,
+//           useNativeDriver: true,
+//         }),
+//       ]).start();
+//     } else {
+//       Animated.parallel([
+//         Animated.timing(translateY, {
+//           toValue: 400,
+//           duration: 250,
+//           easing: Easing.in(Easing.ease),
+//           useNativeDriver: true,
+//         }),
+//         Animated.timing(backdropOpacity, {
+//           toValue: 0,
+//           duration: 200,
+//           useNativeDriver: true,
+//         }),
+//       ]).start(() => {
+//         setInternalVisible(false);
+//       });
+//     }
+//   }, [visible]);
+//   const DRAG_CLOSE_THRESHOLD = 100;
+//   const panResponder = useRef(
+//     PanResponder.create({
+//       onMoveShouldSetPanResponder: (_, gestureState) =>
+//         gestureState.dy > 5 || gestureState.dy < -5, // detect upward drag too
+//       onPanResponderGrant: () => {
+//         // set current position as offset
+//         translateY.extractOffset();
+//       },
+//       onPanResponderMove: (_, gestureState) => {
+//         translateY.setValue(gestureState.dy); // smooth follow
+//       },
+//       onPanResponderRelease: (_, gestureState) => {
+//         translateY.flattenOffset(); // combine offset & value
+//         if (gestureState.dy > DRAG_CLOSE_THRESHOLD || gestureState.vy > 1.2) {
+//           // close sheet
+//           Animated.timing(translateY, {
+//             toValue: 400,
+//             duration: 200,
+//             easing: Easing.in(Easing.ease),
+//             useNativeDriver: true,
+//           }).start(() => onClose());
+//         } else {
+//           // snap back
+//           Animated.spring(translateY, {
+//             toValue: 0,
+//             tension: 120,
+//             friction: 12,
+//             useNativeDriver: true,
+//           }).start();
+//         }
+//       },
+//     }),
+//   ).current;
+//   if (!internalVisible) return null;
+//   return (
+//     <Modal transparent visible animationType="none">
+//       {/* Backdrop */}
+//       <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+//         <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
+//       </Animated.View>
+//       {/* Bottom Sheet */}
+//       <Animated.View
+//         {...panResponder.panHandlers}
+//         style={[
+//           styles.bottomSheet,
+//           {
+//             backgroundColor: dark ? "#121212" : "#fff",
+//             transform: [{ translateY }],
+//           },
+//         ]}
+//       >
+//         {/* Handle */}
+//         <TouchableOpacity style={styles.handle} onPress={onClose} />
+//         {/* Header */}
+//         <View style={styles.header}>
+//           <ThemedText style={styles.title}>{title}</ThemedText>
+//           <TouchableOpacity onPress={onClose}>
+//             <AntDesign
+//               name="close-circle"
+//               size={18}
+//               color={dark ? "#fff" : "#333740"}
+//             />
+//           </TouchableOpacity>
+//         </View>
+//         <ThemedText className="text-sm text-gray-500 mb-4">
+//           {description}
+//         </ThemedText>
+//         {/* Content */}
+//         <FlatList
+//           data={filters}
+//           keyExtractor={(item) => item.key}
+//           showsVerticalScrollIndicator={false}
+//           contentContainerStyle={{ paddingBottom: 120, height: "100%" }}
+//           renderItem={({ item }) => item.render()}
+//         />
+//         {/* Actions */}
+//         <View style={styles.actions}>
+//           <TouchableOpacity onPress={onReset} style={styles.resetButton}>
+//             <ThemedText>Cancel</ThemedText>
+//           </TouchableOpacity>
+//           <TouchableOpacity
+//             onPress={onApply}
+//             style={styles.applyButton}
+//             className="flex flex-row justify-center items-center gap-2"
+//           >
+//             <ThemedText style={{ color: "#fff" }}>Proceed</ThemedText>
+//             {loading && <Spinner size={18} color="#fff" />}
+//           </TouchableOpacity>
+//         </View>
+//       </Animated.View>
+//     </Modal>
+//   );
+// };
+// export default PurchaseModal;
+// const styles = StyleSheet.create({
+//   backdrop: {
+//     ...StyleSheet.absoluteFillObject,
+//     backgroundColor: "rgba(0,0,0,0.4)",
+//   },
+//   bottomSheet: {
+//     position: "absolute",
+//     bottom: 0,
+//     width: "100%",
+//     height: "80%",
+//     paddingHorizontal: 10,
+//     paddingVertical: 16,
+//     borderTopLeftRadius: 24,
+//     borderTopRightRadius: 24,
+//   },
+//   handle: {
+//     width: 40,
+//     height: 5,
+//     borderRadius: 10,
+//     backgroundColor: "#ccc",
+//     alignSelf: "center",
+//     marginBottom: 12,
+//   },
+//   header: {
+//     flexDirection: "row",
+//     justifyContent: "space-between",
+//     alignItems: "center",
+//     paddingHorizontal: 16,
+//     marginBottom: 12,
+//   },
+//   title: {
+//     fontFamily: "PoppinsSemiBold",
+//     fontSize: 20,
+//   },
+//   actions: {
+//     position: "absolute",
+//     bottom: 24,
+//     left: 16,
+//     right: 16,
+//     flexDirection: "row",
+//     gap: 12,
+//   },
+//   resetButton: {
+//     flex: 1,
+//     borderWidth: 1,
+//     borderColor: "#9ca3af",
+//     backgroundColor: "#fff",
+//     paddingVertical: 10,
+//     borderRadius: 10,
+//     alignItems: "center",
+//   },
+//   applyButton: {
+//     flex: 1,
+//     paddingVertical: 10,
+//     borderRadius: 10,
+//     alignItems: "center",
+//     backgroundColor: "#027DFF",
+//   },
+// });
+import { AntDesign } from "@expo/vector-icons";
+import { useTheme } from "@react-navigation/core";
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, FlatList, Modal, PanResponder, Pressable, StyleSheet, TouchableOpacity, View, } from "react-native";
+import { ThemedText } from "../themed-text";
+import { Spinner } from "../ui/buttons/spinner";
+const PurchaseModal = ({ visible, title = "Buy Airtime", description, filters, loading, onClose, onApply, onReset, }) => {
+    const { dark } = useTheme();
+    const translateY = useRef(new Animated.Value(400)).current;
+    const backdropOpacity = useRef(new Animated.Value(0)).current;
+    const [internalVisible, setInternalVisible] = useState(visible);
+    /* ---------------- Animation ---------------- */
+    useEffect(() => {
+        if (visible) {
+            setInternalVisible(true);
+            translateY.setValue(400);
+            backdropOpacity.setValue(0);
+            Animated.parallel([
+                Animated.timing(translateY, {
+                    toValue: 0,
+                    duration: 350,
+                    easing: Easing.out(Easing.ease),
+                    useNativeDriver: true,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 1,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+        else {
+            Animated.parallel([
+                Animated.timing(translateY, {
+                    toValue: 400,
+                    duration: 250,
+                    easing: Easing.in(Easing.ease),
+                    useNativeDriver: true,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => setInternalVisible(false));
+        }
+    }, [visible]);
+    /* ---------------- PanResponder (Handle only) ---------------- */
+    const panResponder = useRef(PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dy) > 8,
+        onPanResponderMove: (_, gesture) => {
+            if (gesture.dy > 0) {
+                translateY.setValue(gesture.dy);
+            }
+        },
+        onPanResponderRelease: (_, gesture) => {
+            if (gesture.dy > 120 || gesture.vy > 1.2) {
+                Animated.timing(translateY, {
+                    toValue: 400,
+                    duration: 200,
+                    easing: Easing.in(Easing.ease),
+                    useNativeDriver: true,
+                }).start(onClose);
+            }
+            else {
+                Animated.spring(translateY, {
+                    toValue: 0,
+                    tension: 120,
+                    friction: 12,
+                    useNativeDriver: true,
+                }).start();
+            }
+        },
+    })).current;
+    if (!internalVisible)
+        return null;
+    return (<Modal transparent visible animationType="none">
+      {/* Backdrop */}
+      <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onClose}/>
+      </Animated.View>
+
+      {/* Bottom Sheet */}
+      <Animated.View style={[
+            styles.bottomSheet,
+            {
+                backgroundColor: dark ? "#333740" : "#fff",
+                transform: [{ translateY }],
+            },
+        ]}>
+        {/* Handle (Drag here only) */}
+        <TouchableOpacity {...panResponder.panHandlers} style={styles.handle}/>
+
+        {/* Header */}
+        <View style={styles.header}>
+          <ThemedText style={styles.title}>{title}</ThemedText>
+          <TouchableOpacity onPress={onClose}>
+            <AntDesign name="close-circle" size={18} color={dark ? "#fff" : "#333740"}/>
+          </TouchableOpacity>
+        </View>
+
+        {description && (<ThemedText className="text-sm text-gray-500 mb-4">
+            {description}
+          </ThemedText>)}
+
+        {/* Content (NOW SCROLLABLE ✅) */}
+        <FlatList data={filters} keyExtractor={(item) => item.key} showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 140 }} renderItem={({ item }) => item.render()}/>
+
+        {/* Actions */}
+        <View style={styles.actions}>
+          <TouchableOpacity onPress={onReset} style={styles.resetButton}>
+            <ThemedText>Cancel</ThemedText>
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={onApply} style={styles.applyButton} className="flex-row justify-center items-center gap-2">
+            <ThemedText style={{ color: "#fff" }}>Proceed</ThemedText>
+            {loading && <Spinner size={18} color="#fff"/>}
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+    </Modal>);
+};
+export default PurchaseModal;
+/* ---------------- Styles ---------------- */
+const styles = StyleSheet.create({
+    backdrop: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: "rgba(0,0,0,0.4)" }),
+    bottomSheet: {
+        position: "absolute",
+        bottom: 0,
+        width: "100%",
+        height: "80%",
+        paddingHorizontal: 10,
+        paddingVertical: 16,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    handle: {
+        width: 40,
+        height: 5,
+        borderRadius: 10,
+        backgroundColor: "#ccc",
+        alignSelf: "center",
+        marginBottom: 12,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        marginBottom: 12,
+    },
+    title: {
+        fontFamily: "PoppinsSemiBold",
+        fontSize: 20,
+    },
+    actions: {
+        position: "absolute",
+        bottom: 24,
+        left: 16,
+        right: 16,
+        flexDirection: "row",
+        gap: 12,
+    },
+    resetButton: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: "#9ca3af",
+        backgroundColor: "#fff",
+        paddingVertical: 10,
+        borderRadius: 10,
+        alignItems: "center",
+    },
+    applyButton: {
+        flex: 1,
+        paddingVertical: 10,
+        borderRadius: 10,
+        alignItems: "center",
+        backgroundColor: "#027DFF",
+    },
+});

package/dist/components/TransferPayment.d.ts

@@ -0,0 +1,16 @@
+type TransferPaymentProps = {
+    loading: boolean;
+    amount: number;
+    transferDetail: {
+        bankName: string;
+        accountNumber: string;
+        accountName: string;
+    };
+    timeLeft: number;
+    copied: boolean;
+    handleCopy: (text: string) => void;
+    formatAmount: (value: number) => string;
+    formatTime: (seconds: number) => string;
+};
+export default function TransferPayment({ loading, amount, transferDetail, timeLeft, copied, handleCopy, formatAmount, formatTime, }: TransferPaymentProps): import("react").JSX.Element;
+export {};