- {filteredCards.map((card, index) => (
-
-
toggleCircle(index)}
- showCircle={card.showCircle}
- />
-
-
- {card.bank}
-
-
- Created: {card.date}
-
+
+ {/* Render saved card details if available and filtered */}
+ {filteredSavedCards.length > 0 ? (
+ filteredSavedCards.map((card, index) => (
+
+
+
+
+ {card.enteredDetails?.description || "N/A"}
+
+
+ Created: {card.enteredDetails?.creationDate || "N/A"}
+
+
+
handleDetailsClick(index)}>Details
-
toggleCircle(index)}>Details
-
No cards found
+ ) : (
+ // Render static cards if no saved card details and no search term
+ cards.map((card, index) => (
+
+
handleSelectCard(index)}
+ showCircle={index === selectedCardIndex && showRedDot}
+ />
+
+
+ {card.bank}
+
+
+ Created: {card.date}
+
+
handleSelectCard(index)}>Details
+
);
};
diff --git a/src/components/dashboard/wallet/addWallet.jsx b/src/components/dashboard/wallet/addWallet.jsx
index f24915a..e89037a 100644
--- a/src/components/dashboard/wallet/addWallet.jsx
+++ b/src/components/dashboard/wallet/addWallet.jsx
@@ -1,55 +1,91 @@
-import React, { useState } from 'react';
-import AddWallet from './addCardComponent';
-import Pop from './popUp'; // Import the Modal component
+import React, { useRef, useState } from "react";
+import AddWallet from "./addCardComponent";
+import Pop from "./PopUp";
+import Card1 from "./CardDesign";
+import Card2 from "./CardDesign1";
+import Card3 from "./CardDesign3";
+import card1 from "../../../assets/images/Card 7.png";
+import card2 from "../../../assets/images/Cards.png";
+import card3 from "../../../assets/images/Group 56.png";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "./Prev.css";
+// import "../../../../src/swipper.css"
+
+import { Pagination } from "swiper/modules";
+import { useCardContext } from "../../../context/CardContext";
export default function AddWalletPage() {
- const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
- const handleOpenModal = () => {
- setIsModalOpen(true);
- };
+ const handleOpenModal = () => {
+ setIsModalOpen(true);
+ };
- const handleCloseModal = () => {
- setIsModalOpen(false);
- };
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ };
- return (
- <>
-
-
-
- Create New Card
-
-
-
-
- Manage Cards
-
-
View all
-
-
-
-
-
{/* Render Modal */}
-
- );
+ return (
+ <>
+
+
+
+
+ {Card1}
+
+
+ {Card2}
+
+
+ {Card3}
+
+ {/*
+ 
{" "}
+ */}
+
+
+
+ Create New Card
+
+
+
+
+ Manage Cards
+
+
View all
+
+
+
+
+
+
+ );
}
diff --git a/src/components/dashboard/wallet/cardComponent.jsx b/src/components/dashboard/wallet/cardComponent.jsx
index e7ad6ae..8b96094 100644
--- a/src/components/dashboard/wallet/cardComponent.jsx
+++ b/src/components/dashboard/wallet/cardComponent.jsx
@@ -1,34 +1,102 @@
-import React from "react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
import Looper from "../../../assets/images/Looper-1.png";
import ReactFlagsSelect from "react-flags-select";
import Framer from "../../../assets/images/Frame.png";
import Framer2 from "../../../assets/images/Frame (1).png";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import History from "./history";
-import Button from "./button";
-import AddWallet from "./addWallet";
+import Button from "../TargetSavings/Button";
+import AddWallet from "./AddWallet";
-import { useState } from "react";
export default function Card() {
const [selected, setSelected] = useState("US");
const [showAmount, setShowAmount] = useState(true);
+ const [amount, setAmount] = useState(() => {
+ const savedAmount = localStorage.getItem("amount");
+ const numericAmount = savedAmount ? parseFloat(savedAmount) : 0;
+ return isNaN(numericAmount) ? 0 : numericAmount;
+ });
+ const [inputAmount, setInputAmount] = useState("");
+ const [showModal, setShowModal] = useState(false);
+ const navigate = useNavigate();
+
+ const handlePayment = () => {
+ const numericAmount = parseFloat(inputAmount.replace(/[^0-9.]/g, ""));
+ if (isNaN(numericAmount) || numericAmount <= 0) {
+ alert("Invalid amount");
+ return;
+ }
+
+ const config = {
+ public_key: "FLWPUBK_TEST-02b9b5fc6406bd4a41c3ff141cc45e93-X",
+ tx_ref: Date.now(), // Use unique tx_ref
+ amount: numericAmount,
+ currency: 'NGN',
+ customer: {
+ email: 'user@gmail.com',
+ phone_number: '070********',
+ name: 'john doe',
+ },
+ customizations: {
+ title: 'my Payment Title',
+ description: 'Funding my wallet',
+ logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+ },
+ };
+
+ const handleFlutterPayment = useFlutterwave(config);
+
+ handleFlutterPayment({
+ callback: function (data) {
+ const newBalance = amount + numericAmount;
+ setAmount(newBalance);
+ localStorage.setItem("amount", newBalance);
+ // Save transaction details in localStorage
+ const transaction = {
+ id: data.tx_ref,
+ amount: numericAmount,
+ date: new Date().toISOString(),
+ payment_options
+ };
+
+ let transactions = JSON.parse(localStorage.getItem("transactions")) || [];
+ transactions.push(transaction);
+ localStorage.setItem("transactions", JSON.stringify(transactions));
+
+ navigate("/dashboard/wallet");
+ closePaymentModal();
+ setShowModal(false);
+ },
+ onClose: function () {
+ setShowModal(false);
+ }
+ }).catch(error => {
+ console.error('Payment error:', error);
+ closePaymentModal();
+ setShowModal(false);
+ });
+ };
+
const toggleVisibility = () => {
setShowAmount(!showAmount);
};
const renderAmount = () => {
- return showAmount ? "$18,000" : "******";
+ return showAmount ? `₦${amount.toFixed(2)}` : "******";
};
- const topUp = () => {
- alert("top-up");
+
+ const handleInputChange = (event) => {
+ setInputAmount(event.target.value);
};
- const render = "123 4567 890";
+
return (
<>
-
+
Wallet Balance
setSelected(code)}
/>
- {/* */}
-
+
{renderAmount()}
@@ -72,40 +130,67 @@ export default function Card() {
className="text-white w-24 absolute top-2 right-2"
onClick={toggleVisibility}
>
- {" "}
{showAmount ? : }
-
Unique Id: {render}
+
Unique Id:
-
+
+ {showModal && (
+
+
+
Enter Amount
+
+
+
+
+
+ )}
);
}
diff --git a/src/components/dashboard/wallet/cardDesign1.jsx b/src/components/dashboard/wallet/cardDesign1.jsx
index b14e0d1..c74cd41 100644
--- a/src/components/dashboard/wallet/cardDesign1.jsx
+++ b/src/components/dashboard/wallet/cardDesign1.jsx
@@ -1,11 +1,20 @@
import React from "react";
-
-export default function Card1() {
- return(
- <>
-
-
-
-
- )
-}
\ No newline at end of file
+import Card2 from "../../../assets/images/Cards.png";
+export default function CardTwo() {
+ return (
+
+ );
+}
diff --git a/src/components/dashboard/wallet/creatComponent.jsx b/src/components/dashboard/wallet/creatComponent.jsx
deleted file mode 100644
index 408d9bf..0000000
--- a/src/components/dashboard/wallet/creatComponent.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from "react";
-export default function Card({ children, className }) {
- return
;
-}
diff --git a/src/components/dashboard/wallet/history.jsx b/src/components/dashboard/wallet/history.jsx
index 28f6bc1..2bb8f40 100644
--- a/src/components/dashboard/wallet/history.jsx
+++ b/src/components/dashboard/wallet/history.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import HistoryComponent from "./historyComponent";
+import HistoryComponent from "./HistoryComponent";
const history = () => {
return (
<>
diff --git a/src/components/dashboard/wallet/popUp.jsx b/src/components/dashboard/wallet/popUp.jsx
index d5eed9d..4c7bfca 100644
--- a/src/components/dashboard/wallet/popUp.jsx
+++ b/src/components/dashboard/wallet/popUp.jsx
@@ -1,10 +1,9 @@
-import React, { useState } from "react";
-import Close from "../../../assets/images/close.png";
-import Atm from "../../../assets/images/ATM Illustration.png";
-import Swip from "./swippedCard";
-
-const Modal = ({ isOpen, onClose }) => {
- const [showSwip, setShowSwip] = useState(false);
+import React from "react";
+import Close from "../../../assets/images/close.png"; // Update the path as necessary
+import Swip from "./SwippedCard"; // Ensure Swip component is correctly imported
+import Atm from "../../../assets/images/ATM Illustration.png"; // Update the path as necessary
+const Pop = ({ isOpen, onClose }) => {
+ const [showSwip, setShowSwip] = React.useState(false);
const handleProceedClick = () => {
setShowSwip(true);
@@ -14,20 +13,18 @@ const Modal = ({ isOpen, onClose }) => {
return (
-
-
-
-
+
+
{showSwip ? (
-
+
// Display Swip component when showSwip is true
) : (
<>
-
+
@@ -38,7 +35,7 @@ const Modal = ({ isOpen, onClose }) => {
from your Tuition wallet for seamless transactions