fairsure-checkout-sdk 1.0.0

package/src/components/USSDPayment.tsx

@@ -0,0 +1,422 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+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) {
+  //   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?.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,
+}: {
+  ussdBanks: UssdBank[];
+  loading: boolean;
+  onSelectBank: (bank: UssdBank) => void;
+}) {
+  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,
+}: {
+  ussdCode: string;
+  copied: boolean;
+  loading: boolean;
+  handleCopy: (text: string) => void;
+}) {
+  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
+  },
+});