fairsure-checkout-sdk 1.0.0

package/dist/components/TransferPayment.js

@@ -0,0 +1,311 @@
+import { Ionicons } from "@expo/vector-icons";
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+export default function TransferPayment({ loading, amount, transferDetail, timeLeft, copied, handleCopy, formatAmount, formatTime, }) {
+    if (loading) {
+        return <ActivityIndicator size="large" color="#4F46E5"/>;
+    }
+    return (<View>
+      <View style={styles.transferBox}>
+        <Text style={styles.transferText}>
+          Transfer ₦{formatAmount(amount)} to the account below
+        </Text>
+
+        <View>
+          <TransferDetailItem label="Bank Name" value={transferDetail.bankName}/>
+
+          <View style={styles.transferDetail}>
+            <Text style={styles.transferLabel}>Account Number</Text>
+            <View style={styles.row}>
+              <Text style={styles.accountNumber}>
+                {transferDetail.accountNumber}
+              </Text>
+              <TouchableOpacity onPress={() => handleCopy(transferDetail.accountNumber)}>
+                <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <TransferDetailItem label="Account Name" value={transferDetail.accountName}/>
+        </View>
+      </View>
+
+      <View style={styles.transferNote}>
+        <Text style={styles.transferNoteText}>
+          <Text style={{ fontWeight: "bold" }}>Note:</Text> This account expires
+          in{" "}
+          <Text style={{
+            fontWeight: "bold",
+            color: timeLeft <= 10 * 60 ? "#FF0000" : "#4F46E5",
+        }}>
+            {formatTime(timeLeft)}
+          </Text>{" "}
+          minutes. Please click "I have sent the Money" button once you have
+          sent the money.
+        </Text>
+      </View>
+    </View>);
+}
+function TransferDetailItem({ label, value, }) {
+    return (<View style={styles.transferDetail}>
+      <Text style={styles.transferLabel}>{label}</Text>
+      <Text style={styles.transferValue}>{value}</Text>
+    </View>);
+}
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        justifyContent: "center",
+    },
+    modalContainer: {
+        position: "relative",
+        width: "90%",
+        alignSelf: "center",
+        borderRadius: 20,
+        height: "80%",
+        backgroundColor: "white",
+    },
+    otpContainer: {
+        width: "100%",
+        marginHorizontal: "auto",
+        marginTop: 20,
+        marginBottom: 40,
+    },
+    header: {
+        backgroundColor: "#6B21A8",
+        padding: 16,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    },
+    pinWrapper: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    eyeButton: {
+        paddingHorizontal: 10,
+    },
+    eyeText: {
+        color: "#007AFF",
+    },
+    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, marginBottom: 16 },
+    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, marginBottom: 12 },
+    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: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: 8,
+        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/USSDPayment.d.ts

@@ -0,0 +1,21 @@
+type UssdBank = {
+    name: string;
+    code: string;
+};
+type USSDPaymentProps = {
+    selectedBank: UssdBank | null;
+    setSelectedBank: (bank: UssdBank) => void;
+    ussString: {
+        ussdString: string;
+        codeRef: string;
+        amount: string;
+    };
+    showBankDropdown: boolean;
+    setShowBankDropdown: (show: boolean) => void;
+    ussdBanks: UssdBank[];
+    loading: boolean;
+    copied: boolean;
+    handleCopy: (text: string) => void;
+};
+export default function USSDPayment({ selectedBank, setSelectedBank, showBankDropdown, ussString, setShowBankDropdown, ussdBanks, loading, copied, handleCopy, }: USSDPaymentProps): import("react").JSX.Element;
+export {};

package/dist/components/USSDPayment.js

@@ -0,0 +1,316 @@
+import { Ionicons } from "@expo/vector-icons";
+import { ActivityIndicator, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+export default function USSDPayment({ selectedBank, setSelectedBank, showBankDropdown, ussString, setShowBankDropdown, ussdBanks, loading, copied, handleCopy, }) {
+    //   console.log("USSSSSS", ussdBanks);
+    return (<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 === null || selectedBank === void 0 ? void 0 : selectedBank.name) || "Choose your bank"}
+          </Text>
+          <Ionicons name="chevron-down" size={20} color="#9CA3AF"/>
+        </TouchableOpacity>
+
+        {showBankDropdown && (<BankDropdown ussdBanks={ussdBanks} loading={loading} onSelectBank={(bank) => {
+                setSelectedBank(bank);
+                setShowBankDropdown(false);
+            }}/>)}
+      </View>
+
+      {selectedBank && (<USSDInstructions ussdCode={ussString.ussdString} copied={copied} loading={loading} handleCopy={handleCopy}/>)}
+    </View>);
+}
+function BankDropdown({ ussdBanks, loading, onSelectBank, }) {
+    return (<View style={styles.dropdownList}>
+      <ScrollView style={{ maxHeight: 240 }} nestedScrollEnabled keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator>
+        {loading ? (<ActivityIndicator size="large" color="#4F46E5"/>) : ussdBanks.length === 0 ? (<Text style={styles.dropdownPlaceholder}>No banks available</Text>) : (ussdBanks.map((bank) => (<TouchableOpacity key={bank.code} onPress={() => onSelectBank(bank)} style={styles.dropdownItem}>
+              <Text style={styles.dropdownItemText}>{bank.name}</Text>
+            </TouchableOpacity>)))}
+      </ScrollView>
+    </View>);
+}
+function USSDInstructions({ ussdCode, copied, handleCopy, loading, }) {
+    return (<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}>{ussdCode}</Text>
+          <TouchableOpacity onPress={() => handleCopy(ussdCode)}>
+            <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
+          </TouchableOpacity>
+          {loading && <ActivityIndicator size="small" color="#4F46E5"/>}
+        </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>);
+}
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        justifyContent: "center",
+    },
+    modalContainer: {
+        position: "relative",
+        width: "90%",
+        alignSelf: "center",
+        borderRadius: 20,
+        height: "80%",
+        backgroundColor: "white",
+    },
+    otpContainer: {
+        width: "100%",
+        marginHorizontal: "auto",
+        marginTop: 20,
+        marginBottom: 40,
+    },
+    header: {
+        backgroundColor: "#6B21A8",
+        padding: 16,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    },
+    pinWrapper: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    eyeButton: {
+        paddingHorizontal: 10,
+    },
+    eyeText: {
+        color: "#007AFF",
+    },
+    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, marginBottom: 16 },
+    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", backgroundColor: "white", marginBottom: 12 },
+    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: 12, // 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: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: 8,
+        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
+    },
+});