Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Transfer funds UI #73

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add Transfer funds UI #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c134a66
Add tranfer UI
haseebzaki-07 Oct 16, 2024
d2de935
resole conflicts
haseebzaki-07 Oct 16, 2024
ecbd406
Merge branch 'main' of https://github.com/gupta-ritik/ExpenseTracker …
haseebzaki-07 Oct 18, 2024
4eb240e
resolve conflicts
haseebzaki-07 Oct 18, 2024
f06b07b
Merge branch 'main' into new_branch_3
haseebzaki-07 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 162 additions & 40 deletions app/root/payment-transfer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,177 @@
"use client";
import HeaderBox from "@/components/HeaderBox";
import PaymentTransferForm from "@/components/PaymentTransferForm";
import { getAccounts } from "@/lib/actions/bank.actions";
import { getLoggedInUser } from "@/lib/actions/user.actions";
import React from "react";
import React, { useState } from "react";

const Transfer = async () => {
const loggedIn = await getLoggedInUser();
const Transfer = () => {
// const loggedIn = await getLoggedInUser();

// Check if user is logged in
if (!loggedIn) {
// Handle the case when no user is logged in
return (
<section className="payment-transfer">
<HeaderBox
title="Payment Transfer"
subtext="You need to be logged in to make a transfer"
/>
</section>
);
}

// Proceed only if the user is logged in and has a valid $id
const accounts = await getAccounts({
userId: loggedIn.$id,
// if (!loggedIn) {
// // Handle the case when no user is logged in
// return (
// <section className="payment-transfer">
// <HeaderBox
// title="Payment Transfer"
// subtext="You need to be logged in to make a transfer"
// />
// </section>
// );
// }

// const accountsData = accounts?.data;

const [formData, setFormData] = useState({
email: "",
phoneNumber: "",
amount: "",
pin: "",
});

if (!accounts) {
// Handle the case when there are no accounts
return (
<section className="payment-transfer">
<HeaderBox
title="Payment Transfer"
subtext="No accounts available for this user"
/>
</section>
);
}
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};

const accountsData = accounts?.data;
const handleSubmit = (e) => {
e.preventDefault();
// Add transfer funds logic here
console.log(formData);
alert("Transfer initiated!");
};

return (
<section className="payment-transfer">
<HeaderBox
title="Payment Transfer"
subtext="Please provide any specific details or notes related to the payment transfer"
/>

<section className="size-full pt-5">
<PaymentTransferForm accounts={accountsData} />
</section>
</section>
<div className="flex gap-5 mt-20 justify-center ">
<div className="mt-10 justify-center items-center w-[40vw]">
<div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full">
<h2 className="text-3xl font-bold text-center text-gray-800">
Transfer Funds
</h2>
<p className="text-center text-gray-600 mt-2 font-semibold">
Securely transfer funds to a user
</p>
<form className="mt-6 space-y-4" onSubmit={handleSubmit}>
{/* Email Input */}
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Recipient's Email
</label>
<input
type="email"
name="email"
id="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter recipient's email"
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>

{/* Phone Number Input */}
<div>
<label
htmlFor="phoneNumber"
className="block text-sm font-medium text-gray-700"
>
Phone Number
</label>
<input
type="text"
name="phoneNumber"
id="phoneNumber"
value={formData.phoneNumber}
onChange={handleChange}
placeholder="Enter recipient's phone number"
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>

{/* Amount Input */}
<div>
<label
htmlFor="amount"
className="block text-sm font-medium text-gray-700"
>
Amount
</label>
<input
type="number"
name="amount"
id="amount"
value={formData.amount}
onChange={handleChange}
placeholder="Enter the amount"
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>

{/* PIN Input */}
<div>
<label
htmlFor="pin"
className="block text-sm font-medium text-gray-700"
>
PIN
</label>
<input
type="password"
name="pin"
id="pin"
value={formData.pin}
onChange={handleChange}
placeholder="Enter your 4-digit PIN"
required
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>

{/* Submit Button */}
<div className="mt-6">
<button
type="submit"
className="w-full px-6 py-3 bg-indigo-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Transfer Now
</button>
</div>
</form>
</div>
</div>
<div className="mt-8">
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6 rounded-lg shadow-lg max-w-lg w-full">
<h3 className="text-lg font-semibold mb-4">Payment Method</h3>
<div className="flex justify-between items-center">
{/* Card Details */}
<div>
<p className="text-sm">Card Type: <span className="font-semibold">Visa</span></p>
<p className="text-sm mt-1">Card Number: <span className="font-semibold">**** **** **** 1234</span></p>
<p className="text-sm mt-1">Cardholder Name: <span className="font-semibold">John Doe</span></p>
</div>
{/* Card Icon */}
<div className="text-4xl">
💳
</div>
</div>
<button
type="button"
className="w-full mt-6 bg-white text-indigo-600 font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-gray-100"
>
Choose Another Card
</button>
</div>
</div>
</div>
);
};

Expand Down
Loading