fairsure-checkout-sdk 1.0.0

package/src/components/TransferPayment.tsx

@@ -0,0 +1,372 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+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) {
+  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,
+}: {
+  label: string;
+  value: string;
+}) {
+  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
+  },
+});