fairsure-checkout-sdk 1.0.0 → 1.0.2

package/dist/components/usePaymentCheckout.js

@@ -193,6 +193,14 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
             maximumFractionDigits: 2,
         });
     };
+    const convertExpiryForAPI = (expiry) => {
+        const clean = expiry.replace("/", ""); // 1326
+        if (clean.length !== 4)
+            return clean;
+        const mm = clean.slice(0, 2);
+        const yy = clean.slice(2, 4);
+        return `${yy}${mm}`; // 2613
+    };
     const formatCardNumber = (value) => {
         const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
         const matches = v.match(/\d{4,16}/g);
@@ -259,11 +267,12 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
     };
     const handleCardPayment = async () => {
         var _a, _b;
+        const formattedExpiry = convertExpiryForAPI(expiryDate.replace("/", ""));
         setLoading(true);
         try {
             const payload = {
                 pan: cardNumber.replace(/\s/g, ""),
-                expiryDate: expiryDate.replace("/", ""),
+                expiryDate: formattedExpiry,
                 cvv,
                 pin,
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fairsure-checkout-sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "peerDependencies": {

package/src/components/usePaymentCheckout.ts

@@ -225,6 +225,17 @@ export function usePaymentCheckout(
     });
   };
 
+  const convertExpiryForAPI = (expiry: string) => {
+    const clean = expiry.replace("/", ""); // 1326
+
+    if (clean.length !== 4) return clean;
+
+    const mm = clean.slice(0, 2);
+    const yy = clean.slice(2, 4);
+
+    return `${yy}${mm}`; // 2613
+  };
+
   const formatCardNumber = (value: string) => {
     const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
     const matches = v.match(/\d{4,16}/g);
@@ -243,6 +254,7 @@ export function usePaymentCheckout(
     }
     return v;
   };
+
   const completeCard = async (data: string) => {
     setLoading(true);
     try {
@@ -291,12 +303,14 @@ export function usePaymentCheckout(
       }
     }
   };
+
   const handleCardPayment = async () => {
+    const formattedExpiry = convertExpiryForAPI(expiryDate.replace("/", ""));
     setLoading(true);
     try {
       const payload = {
         pan: cardNumber.replace(/\s/g, ""),
-        expiryDate: expiryDate.replace("/", ""),
+        expiryDate: formattedExpiry,
         cvv,
         pin,
       };

package/dist/components/Checkout.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface PaystackCheckoutProps {
-    amount: number;
-    merchantName?: string;
-    onClose: () => void;
-    onSuccess?: (reference: string) => void;
-}
-export default function Checkout({ amount, merchantName, onClose, onSuccess, }: PaystackCheckoutProps): React.JSX.Element;
-export {};

package/dist/components/Checkout.js

@@ -1,520 +0,0 @@
-// components/PaystackCheckout.tsx
-import { Ionicons } from "@expo/vector-icons";
-import * as Clipboard from "expo-clipboard";
-import React, { useEffect, useState } from "react";
-import { Alert, Modal, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
-export default function Checkout({ amount, merchantName = "Merchant", onClose, onSuccess, }) {
-    var _a;
-    const [selectedMethod, setSelectedMethod] = useState("card");
-    const [cardNumber, setCardNumber] = useState("");
-    const [expiryDate, setExpiryDate] = useState("");
-    const [cvv, setCvv] = useState("");
-    const [selectedBank, setSelectedBank] = useState("");
-    const [showBankDropdown, setShowBankDropdown] = useState(false);
-    const [accountNumber] = useState("1234567890");
-    const [copied, setCopied] = useState(false);
-    useEffect(() => {
-        console.log("method", selectedMethod);
-    }, [selectedMethod]);
-    const paymentMethods = [
-        { id: "card", name: "Card", icon: "card-outline" },
-        { id: "transfer", name: "Transfer", icon: "business-outline" },
-        { id: "ussd", name: "USSD", icon: "phone-portrait-outline" },
-    ];
-    const ussdBanks = [
-        { code: "gtb", name: "GTBank", ussdCode: `*737*50*${amount}*159#` },
-        { code: "access", name: "Access Bank", ussdCode: `*901*${amount}*159#` },
-        { code: "zenith", name: "Zenith Bank", ussdCode: `*966*${amount}*159#` },
-        { code: "uba", name: "UBA", ussdCode: `*919*${amount}*159#` },
-        { code: "first", name: "First Bank", ussdCode: `*894*${amount}*159#` },
-        {
-            code: "fidelity",
-            name: "Fidelity Bank",
-            ussdCode: `*770*${amount}*159#`,
-        },
-    ];
-    const formatAmount = (value) => {
-        return value.toLocaleString("en-NG", {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        });
-    };
-    const formatCardNumber = (value) => {
-        const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
-        const matches = v.match(/\d{4,16}/g);
-        const match = (matches && matches[0]) || "";
-        const parts = [];
-        for (let i = 0; i < match.length; i += 4) {
-            parts.push(match.substring(i, i + 4));
-        }
-        return parts.length ? parts.join(" ") : value;
-    };
-    const formatExpiry = (value) => {
-        const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
-        if (v.length >= 2) {
-            return v.slice(0, 2) + "/" + v.slice(2, 4);
-        }
-        return v;
-    };
-    const handleCopy = async (text) => {
-        await Clipboard.setStringAsync(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    };
-    const handlePay = () => {
-        const reference = `ref_${Date.now()}`;
-        Alert.alert("Payment Successful", `Your payment of ₦${formatAmount(amount)} has been processed successfully.`, [
-            {
-                text: "OK",
-                onPress: () => {
-                    if (onSuccess)
-                        onSuccess(reference);
-                    onClose();
-                },
-            },
-        ]);
-    };
-    const handleClose = () => {
-        setCardNumber("");
-        setExpiryDate("");
-        setCvv("");
-        setSelectedBank("");
-        setSelectedMethod("card");
-        onClose();
-    };
-    return (<Modal visible transparent animationType="slide" onRequestClose={handleClose}>
-      <View style={styles.overlay}>
-        <View style={styles.modalContainer}>
-          {/* Header */}
-          <View style={styles.header}>
-            <View style={styles.headerTop}>
-              <View>
-                <Text style={styles.headerTitle}>Pay {merchantName}</Text>
-                <Text style={styles.headerSubtitle}>Complete your payment</Text>
-              </View>
-              <TouchableOpacity onPress={handleClose} style={styles.closeBtn}>
-                <Ionicons name="close" size={24} color="white"/>
-              </TouchableOpacity>
-            </View>
-
-            <View style={styles.amountBox}>
-              <Text style={styles.amountLabel}>Amount to pay</Text>
-              <Text style={styles.amountText}>₦{formatAmount(amount)}</Text>
-            </View>
-          </View>
-
-          <ScrollView style={styles.scrollContainer}>
-            <View style={styles.body}>
-              {/* Payment Methods */}
-              <View style={styles.paymentMethodsContainer}>
-                {paymentMethods.map((method) => (<TouchableOpacity key={method.id} onPress={() => setSelectedMethod(method.id)} style={[
-                styles.paymentMethod,
-                selectedMethod === method.id &&
-                    styles.paymentMethodSelected,
-            ]}>
-                    <Ionicons name={method.icon} size={20} color={selectedMethod === method.id ? "#4F46E5" : "#6B7280"}/>
-                    <Text style={[
-                styles.paymentMethodText,
-                selectedMethod === method.id &&
-                    styles.paymentMethodTextSelected,
-            ]}>
-                      {method.name}
-                    </Text>
-                  </TouchableOpacity>))}
-              </View>
-
-              {/* Card Payment */}
-              {selectedMethod === "card" && (<View>
-                  <View style={styles.inputGroup}>
-                    <Text style={styles.inputLabel}>Card Number</Text>
-                    <View style={styles.inputWrapper}>
-                      <TextInput value={cardNumber} onChangeText={(text) => setCardNumber(formatCardNumber(text))} placeholder="0000 0000 0000 0000" maxLength={19} keyboardType="number-pad" style={styles.input}/>
-                      <Ionicons name="card-outline" size={20} color="#9CA3AF" style={styles.inputIcon}/>
-                    </View>
-                  </View>
-
-                  <View style={styles.row}>
-                    <View style={styles.flex1}>
-                      <Text style={styles.inputLabel}>Expiry Date</Text>
-                      <TextInput value={expiryDate} onChangeText={(text) => setExpiryDate(formatExpiry(text))} placeholder="MM/YY" maxLength={5} keyboardType="number-pad" style={styles.input}/>
-                    </View>
-                    <View style={styles.flex1}>
-                      <Text style={styles.inputLabel}>CVV</Text>
-                      <TextInput value={cvv} onChangeText={(text) => setCvv(text.replace(/\D/g, "").slice(0, 3))} placeholder="123" maxLength={3} keyboardType="number-pad" secureTextEntry style={styles.input}/>
-                    </View>
-                  </View>
-
-                  <View style={styles.secureBox}>
-                    <Ionicons name="lock-closed" size={16} color="#6B7280"/>
-                    <Text style={styles.secureText}>
-                      Your payment is secured with 256-bit SSL encryption
-                    </Text>
-                  </View>
-                </View>)}
-
-              {/* Transfer Payment */}
-              {selectedMethod === "transfer" && (<View>
-                  <View style={styles.transferBox}>
-                    <Text style={styles.transferText}>
-                      Transfer ₦{formatAmount(amount)} to the account below
-                    </Text>
-
-                    <View>
-                      <View style={styles.transferDetail}>
-                        <Text style={styles.transferLabel}>Bank Name</Text>
-                        <Text style={styles.transferValue}>Wema Bank</Text>
-                      </View>
-
-                      <View style={styles.transferDetail}>
-                        <Text style={styles.transferLabel}>Account Number</Text>
-                        <View style={styles.row}>
-                          <Text style={styles.accountNumber}>
-                            {accountNumber}
-                          </Text>
-                          <TouchableOpacity onPress={() => handleCopy(accountNumber)}>
-                            <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
-                          </TouchableOpacity>
-                        </View>
-                      </View>
-
-                      <View style={styles.transferDetail}>
-                        <Text style={styles.transferLabel}>Account Name</Text>
-                        <Text style={styles.transferValue}>
-                          Paystack-John Doe
-                        </Text>
-                      </View>
-                    </View>
-                  </View>
-
-                  <View style={styles.transferNote}>
-                    <Text style={styles.transferNoteText}>
-                      <Text style={{ fontWeight: "bold" }}>Note:</Text> This
-                      account expires in 60 minutes. Payment will be confirmed
-                      automatically.
-                    </Text>
-                  </View>
-                </View>)}
-
-              {/* USSD Payment */}
-              {selectedMethod === "ussd" && (<View>
-                  <View style={styles.inputGroup}>
-                    <Text style={styles.inputLabel}>Select Your Bank</Text>
-                    <TouchableOpacity onPress={() => setShowBankDropdown(!showBankDropdown)} style={styles.dropdown}>
-                      <Text style={selectedBank
-                ? styles.dropdownText
-                : styles.dropdownPlaceholder}>
-                        {selectedBank || "Choose your bank"}
-                      </Text>
-                      <Ionicons name="chevron-down" size={20} color="#9CA3AF"/>
-                    </TouchableOpacity>
-
-                    {showBankDropdown && (<View style={styles.dropdownList}>
-                        <ScrollView style={{ maxHeight: 240 }}>
-                          {ussdBanks.map((bank) => (<TouchableOpacity key={bank.code} onPress={() => {
-                        setSelectedBank(bank.name);
-                        setShowBankDropdown(false);
-                    }} style={styles.dropdownItem}>
-                              <Text style={styles.dropdownItemText}>
-                                {bank.name}
-                              </Text>
-                            </TouchableOpacity>))}
-                        </ScrollView>
-                      </View>)}
-                  </View>
-
-                  {selectedBank && (<View style={styles.ussdContainer}>
-                      <Text style={styles.ussdTitle}>
-                        Dial the code below to complete payment
-                      </Text>
-
-                      <View style={styles.ussdCodeContainer}>
-                        <View style={styles.row}>
-                          <Text style={styles.ussdCodeText}>
-                            {(_a = ussdBanks.find((b) => b.name === selectedBank)) === null || _a === void 0 ? void 0 : _a.ussdCode}
-                          </Text>
-                          <TouchableOpacity onPress={() => {
-                    var _a;
-                    return handleCopy(((_a = ussdBanks.find((b) => b.name === selectedBank)) === null || _a === void 0 ? void 0 : _a.ussdCode) || "");
-                }}>
-                            <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
-                          </TouchableOpacity>
-                        </View>
-                      </View>
-
-                      <View>
-                        <Text style={styles.ussdCodeText}>Steps:</Text>
-                        <Text style={styles.ussdStepsText}>
-                          1. Dial the USSD code on your phone{"\n"}
-                          2. Follow the prompts on your screen{"\n"}
-                          3. Authorize payment with your bank PIN
-                        </Text>
-                      </View>
-                    </View>)}
-                </View>)}
-
-              {/* Pay Button */}
-              <TouchableOpacity onPress={handlePay} disabled={(selectedMethod === "card" &&
-            (!cardNumber || !expiryDate || !cvv)) ||
-            (selectedMethod === "ussd" && !selectedBank)} style={[
-            styles.payButton,
-            (selectedMethod === "card" &&
-                (!cardNumber || !expiryDate || !cvv)) ||
-                (selectedMethod === "ussd" && !selectedBank)
-                ? styles.payButtonDisabled
-                : styles.payButtonActive,
-        ]}>
-                <Text style={styles.payButtonText}>
-                  {selectedMethod === "transfer"
-            ? "I have sent the money"
-            : `Pay ₦${formatAmount(amount)}`}
-                </Text>
-              </TouchableOpacity>
-
-              {/* Footer */}
-              <View style={styles.footer}>
-                <Ionicons name="lock-closed" size={16} color="#9CA3AF"/>
-                <Text style={styles.footerText}>Secured by Paystack</Text>
-              </View>
-            </View>
-          </ScrollView>
-        </View>
-      </View>
-    </Modal>);
-}
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: "rgba(0,0,0,0.5)",
-        justifyContent: "flex-end",
-    },
-    modalContainer: {
-        width: "90%",
-        alignSelf: "center",
-        borderRadius: 20,
-        height: "85%",
-        backgroundColor: "white",
-    },
-    header: {
-        backgroundColor: "#6B21A8",
-        padding: 16,
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-    },
-    headerTop: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        marginBottom: 16,
-    },
-    headerTitle: { color: "white", fontSize: 24, fontWeight: "bold" },
-    headerSubtitle: { color: "#E0E7FF", fontSize: 14, marginTop: 4 },
-    closeBtn: {
-        backgroundColor: "rgba(255,255,255,0.2)",
-        borderRadius: 999,
-        padding: 8,
-    },
-    amountBox: {
-        backgroundColor: "rgba(255,255,255,0.2)",
-        borderRadius: 12,
-        padding: 8,
-    },
-    amountLabel: { color: "#E0E7FF", fontSize: 12, marginBottom: 4 },
-    amountText: { color: "white", fontSize: 20, fontWeight: "bold" },
-    scrollContainer: { flex: 1 },
-    body: {
-        padding: 24,
-        backgroundColor: "white",
-        borderBottomLeftRadius: 20,
-        borderBottomRightRadius: 20,
-    },
-    paymentMethodsContainer: {
-        flexDirection: "row",
-        marginBottom: 24,
-        backgroundColor: "#F3F4F6",
-        padding: 4,
-        borderRadius: 12,
-    },
-    paymentMethod: {
-        flex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingVertical: 12,
-        borderRadius: 12,
-        marginHorizontal: 4,
-    },
-    paymentMethodSelected: { backgroundColor: "white" },
-    paymentMethodText: { fontSize: 14, color: "#4B5563", marginLeft: 8 },
-    paymentMethodTextSelected: { color: "#4F46E5", fontWeight: "600" },
-    inputGroup: { marginBottom: 16 },
-    inputLabel: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: "#374151",
-        marginBottom: 4,
-    },
-    inputWrapper: { position: "relative" },
-    input: {
-        width: "100%",
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderWidth: 1,
-        borderColor: "#D1D5DB",
-        borderRadius: 12,
-        backgroundColor: "white",
-    },
-    inputIcon: { position: "absolute", right: 16, top: 14 },
-    row: { flexDirection: "row", gap: 16 },
-    flex1: { flex: 1 },
-    secureBox: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "#F9FAFB",
-        padding: 12,
-        borderRadius: 12,
-        gap: 8,
-        marginBottom: 16,
-    },
-    secureText: { fontSize: 12, color: "#4B5563", flex: 1 },
-    transferBox: {
-        backgroundColor: "#EFF6FF",
-        borderWidth: 1,
-        borderColor: "#BFDBFE",
-        borderRadius: 12,
-        padding: 8,
-        marginBottom: 8,
-    },
-    transferText: {
-        fontSize: 14,
-        color: "#1E3A8A",
-        fontWeight: "500",
-        marginBottom: 12,
-    },
-    transferDetail: {
-        backgroundColor: "white",
-        borderRadius: 12,
-        padding: 8,
-        marginBottom: 12,
-    },
-    transferLabel: { fontSize: 10, color: "#4B5563", marginBottom: 4 },
-    transferValue: { fontWeight: "600", color: "#111827" },
-    accountNumber: {
-        fontWeight: "600",
-        color: "#111827",
-        fontSize: 16,
-        letterSpacing: 2,
-        flex: 1,
-    },
-    transferNote: {
-        backgroundColor: "#FEF3C7",
-        borderWidth: 1,
-        borderColor: "#FDE68A",
-        borderRadius: 12,
-        padding: 8,
-    },
-    transferNoteText: { fontSize: 14, color: "#78350F" },
-    dropdown: {
-        width: "100%",
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderWidth: 1,
-        borderColor: "#D1D5DB",
-        borderRadius: 12,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    dropdownText: { color: "#111827" },
-    dropdownPlaceholder: { color: "#9CA3AF" },
-    dropdownList: {
-        marginTop: 8,
-        backgroundColor: "white",
-        borderWidth: 1,
-        borderColor: "#E5E7EB",
-        borderRadius: 12,
-        overflow: "hidden",
-        maxHeight: 240,
-    },
-    dropdownItem: {
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        borderBottomWidth: 1,
-        borderBottomColor: "#F3F4F6",
-    },
-    dropdownItemText: { color: "#111827" },
-    ussdContainer: {
-        backgroundColor: "#E0E7FF", // bg-indigo-50
-        borderWidth: 1,
-        borderColor: "#C7D2FE", // border-indigo-200
-        borderRadius: 12, // rounded-xl
-        padding: 16, // p-4
-        marginBottom: 16,
-    },
-    ussdTitle: {
-        fontSize: 14, // text-sm
-        color: "#1E3A8A", // text-indigo-900
-        fontWeight: "500", // font-medium
-        marginBottom: 12, // mb-3
-    },
-    ussdCodeContainer: {
-        backgroundColor: "white", // bg-white
-        borderRadius: 12, // rounded-xl
-        padding: 16, // p-4
-        marginBottom: 12, // mb-3
-    },
-    ussdCodeRow: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    ussdCodeText: {
-        fontFamily: "monospace", // font-mono
-        fontSize: 16, // text-base
-        fontWeight: "700", // font-bold
-        color: "#111827", // text-gray-900
-        flex: 1,
-    },
-    ussdCopyBtn: {
-        padding: 8, // p-2
-    },
-    ussdStepsLabel: {
-        fontSize: 14, // text-sm
-        color: "#1E3A8A", // text-indigo-900
-        fontWeight: "600", // font-semibold
-        marginBottom: 8, // mb-2
-    },
-    ussdStepsText: {
-        fontSize: 14, // text-sm
-        color: "#1E40AF", // text-indigo-800
-    },
-    payButton: {
-        width: "100%",
-        paddingVertical: 16, // py-4
-        borderRadius: 12, // rounded-xl
-        marginTop: 8, // mt-2
-        alignItems: "center",
-    },
-    payButtonActive: {
-        backgroundColor: "#4F46E5", // bg-indigo-600
-    },
-    payButtonDisabled: {
-        backgroundColor: "#D1D5DB", // bg-gray-300
-    },
-    payButtonText: {
-        color: "white",
-        fontWeight: "600",
-        fontSize: 18, // text-lg
-        textAlign: "center",
-    },
-    footer: {
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        marginTop: 8, // mt-2
-        gap: 8, // supported in RN 0.71+, acts like Tailwind gap-2
-    },
-    footerText: {
-        fontSize: 14, // text-sm
-        color: "#6B7280", // text-gray-500
-    },
-});

package/dist/components/PurchaseModal.d.ts

@@ -1,17 +0,0 @@
-import React, { ReactElement } from "react";
-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;
-}
-declare const PurchaseModal: React.FC<PurchaseModalProps>;
-export default PurchaseModal;

package/dist/components/PurchaseModal.js

@@ -1,415 +0,0 @@
-// 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",
-    },
-});