BhawanSingh
/
va-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

payment method modal added in settings sections

This commit is contained in:
JaiPandey425 2025-12-02 19:22:48 +05:30
parent 0eea767e5e
commit 475776b214
6 changed files with 187 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/pages/Dashboard.tsx
View File

@ -16,7 +16,7 @@ interface Project {
totalWorkTime: string;
totalWorkMs: number;
totalLogs: number;
status: string
status: string;
}
interface ProjectTrackingData {

4
src/ui/pages/Schedule/Schedule.tsx
View File

@ -38,6 +38,8 @@ const Schedule = () => {
/** Fetch Data */
const fetchSchedules = async () => {
setRefreshing(true);
setLoading(true);
try {
const res = await window.electron.getSchedules();
@ -58,7 +60,7 @@ const Schedule = () => {
/** Refresh Button */
const handleRefresh = async () => {
setRefreshing(true);
await fetchSchedules();
};

157
src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx Normal file
View File

@ -0,0 +1,157 @@
import React, { useState, useEffect } from "react";
import { CreditCard } from "lucide-react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../store";
interface ChangePaymentModalProps {
isOpen: boolean;
onClose: () => void;
}
const ChangePaymentModal: React.FC<ChangePaymentModalProps> = ({
isOpen,
onClose,
}) => {
const dispatch = useDispatch();
const { profile } = useSelector((state: RootState) => state.profile);
const [method, setMethod] = useState(profile?.paymentMethod || "");
const [wiseEmail, setWiseEmail] = useState(profile?.wiseEmail || "");
const [veemAccount, setVeemAccount] = useState(profile?.veemAccount || "");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
if (isOpen) {
setMethod(profile?.paymentMethod || "");
setWiseEmail(profile?.wiseEmail || "");
setVeemAccount(profile?.veemAccount || "");
setError("");
}
}, [isOpen]);
if (!isOpen) return null;
const handleSubmit = async () => {
setError("");
// Validation
if (!method) {
return setError("Please select a payment method.");
}
if (method === "wise" && !wiseEmail.trim()) {
return setError("Wise email is required.");
}
if (method === "wise" && !/^\S+@\S+\.\S+$/.test(wiseEmail)) {
return setError("Enter a valid Wise email.");
}
if (method === "veem" && !veemAccount.trim()) {
return setError("Veem account number is required.");
}
setLoading(true);
// try {
// // Replace with your electron API
// await window.electron.updatePayment({
// method,
// wiseEmail: method === "wise" ? wiseEmail.trim() : "",
// veemAccount: method === "veem" ? veemAccount.trim() : "",
// });
// // Refresh or update Redux
// // dispatch(updateProfile({...}));
// onClose();
// } catch (err) {
// setError("Failed to update payment info. Try again.");
// }
setLoading(false);
};
return (
<dialog open className="modal modal-open">
<div className="modal-box w-96">
<h3 className="font-bold text-lg mb-4 flex items-center gap-2">
<CreditCard size={18} /> Change Payment Method
</h3>
{/* Error */}
{error && (
<div className="alert alert-error py-2 text-xs mb-3">{error}</div>
)}
{/* Dropdown */}
<div className="form-control mb-4">
<label className="label">
<span className="text-sm font-medium">Payment Method</span>
</label>
<select
className="select select-bordered select-sm"
value={method}
onChange={(e) => setMethod(e.target.value)}
>
<option value="">Select method</option>
<option value="wise">Wise</option>
<option value="veem">Veem</option>
</select>
</div>
{/* Wise Email */}
{method === "wise" && (
<div className="form-control mb-4">
<label className="label">
<span className="text-sm font-medium">Wise Email</span>
</label>
<input
type="email"
className="input input-bordered input-sm"
placeholder="Enter Wise email"
value={wiseEmail}
onChange={(e) => setWiseEmail(e.target.value)}
/>
</div>
)}
{/* Veem Account */}
{method === "veem" && (
<div className="form-control mb-4">
<label className="label">
<span className="text-sm font-medium">Veem Account Number</span>
</label>
<input
type="text"
className="input input-bordered input-sm"
placeholder="Enter Veem account"
value={veemAccount}
onChange={(e) => setVeemAccount(e.target.value)}
/>
</div>
)}
<div className="modal-action">
<button className="btn btn-sm btn-ghost" onClick={onClose}>
Cancel
</button>
<button
className={`btn btn-sm btn-primary ${loading ? "loading" : ""}`}
onClick={handleSubmit}
disabled={loading}
>
{loading ? "Updating..." : "Update"}
</button>
</div>
</div>
</dialog>
);
};
export default ChangePaymentModal;

36
src/ui/pages/Settings/Settings.tsx
View File

@ -1,13 +1,15 @@
import React, { useState } from "react";
import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock } from "lucide-react";
import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock, SquarePen } from "lucide-react";
import { useSelector } from "react-redux";
import { RootState } from "../../store";
import ChangePasswordModal from "./ChangePasswordModal";
import ChangePaymentModal from "./SettingModal/ChangePaymentModal";
const Settings: React.FC = () => {
const { profile } = useSelector((state: RootState) => state.profile);
const [modalOpen, setModalOpen] = useState(false);
const [showPaymentModal,setShowPaymentModal] = useState(false)
const fullName = `${profile?.firstName || ""} ${profile?.lastName || ""}`.trim();
@ -84,22 +86,31 @@ const Settings: React.FC = () => {
{/* Payment Info */}
<div className="p-2 rounded bg-base-200/40">
<p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
<CreditCard size={11} /> Payment
</p>
<p className="text-xs font-medium capitalize truncate">
{profile?.paymentMethod || "N/A"}
</p>
<div
className=" p-2 rounded bg-base-200/40 cursor-pointer hover:text-primary transition-all duration-200 ease-in-out hover:scale-[1.02] active:scale-[0.98] " onClick={() => setShowPaymentModal(true)}>
<div className="flex justify-between items-center">
<div>
<p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
<CreditCard size={11} /> Payment
</p>
<p className="text-xs font-medium capitalize truncate">
{profile?.paymentMethod || "N/A"}
</p>
</div>
<span>
<SquarePen size={15} />
</span>
</div>
</div>
{profile?.paymentMethod === "payoneer" && (
{profile?.paymentMethod === "wise" && (
<div className="p-2 rounded bg-base-200/40">
<p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
💳 Payoneer
💳 Wise
</p>
<p className="text-xs font-medium truncate" title={profile?.payoneerAccount || "N/A"}>
{maskLast5(profile?.payoneerAccount)}
{maskLast5(profile?.wiseEmail)}
</p>
</div>
)}
@ -129,8 +140,9 @@ const Settings: React.FC = () => {
</div>
</div>
</div>
{/* Change Password Modal */}
{/* Modal */}
<ChangePasswordModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
<ChangePaymentModal isOpen={showPaymentModal} onClose={() => setShowPaymentModal(false)} />
</div>
);
};

1
src/ui/store/profileSlice.tsx
View File

@ -19,6 +19,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
paymentMethod:string;
payoneerAccount:string;
veemAccount:string;
wiseEmail:string
_id: string;
}

1
types.d.ts vendored
View File

@ -83,6 +83,7 @@ interface ProfileData {
paymentMethod: string;
payoneerAccount: string;
veemAccount: string;
wiseEmail:string
_id: string;
}