From 475776b2147315eb55cc2dea95fcfda50dee7ce0 Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Tue, 2 Dec 2025 19:22:48 +0530 Subject: [PATCH] payment method modal added in settings sections --- src/ui/pages/Dashboard.tsx | 2 +- src/ui/pages/Schedule/Schedule.tsx | 4 +- .../SettingModal/ChangePaymentModal.tsx | 157 ++++++++++++++++++ src/ui/pages/Settings/Settings.tsx | 36 ++-- src/ui/store/profileSlice.tsx | 1 + types.d.ts | 1 + 6 files changed, 187 insertions(+), 14 deletions(-) create mode 100644 src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx diff --git a/src/ui/pages/Dashboard.tsx b/src/ui/pages/Dashboard.tsx index 03d742e..5506739 100644 --- a/src/ui/pages/Dashboard.tsx +++ b/src/ui/pages/Dashboard.tsx @@ -16,7 +16,7 @@ interface Project { totalWorkTime: string; totalWorkMs: number; totalLogs: number; - status: string + status: string; } interface ProjectTrackingData { diff --git a/src/ui/pages/Schedule/Schedule.tsx b/src/ui/pages/Schedule/Schedule.tsx index 63d0461..759ebd8 100644 --- a/src/ui/pages/Schedule/Schedule.tsx +++ b/src/ui/pages/Schedule/Schedule.tsx @@ -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(); }; diff --git a/src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx b/src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx new file mode 100644 index 0000000..6c08447 --- /dev/null +++ b/src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx @@ -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 = ({ + 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 ( + +
+ +

+ Change Payment Method +

+ + {/* Error */} + {error && ( +
{error}
+ )} + + {/* Dropdown */} +
+ + + +
+ + {/* Wise Email */} + {method === "wise" && ( +
+ + setWiseEmail(e.target.value)} + /> +
+ )} + + {/* Veem Account */} + {method === "veem" && ( +
+ + setVeemAccount(e.target.value)} + /> +
+ )} + +
+ + + +
+
+ + ); +}; + +export default ChangePaymentModal; diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx index 180d786..c8a8f4a 100644 --- a/src/ui/pages/Settings/Settings.tsx +++ b/src/ui/pages/Settings/Settings.tsx @@ -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 */} -
-

- Payment -

-

- {profile?.paymentMethod || "N/A"} -

+
setShowPaymentModal(true)}> +
+
+

+ Payment +

+

+ {profile?.paymentMethod || "N/A"} +

+
+ + + +
- {profile?.paymentMethod === "payoneer" && ( + + {profile?.paymentMethod === "wise" && (

- 💳 Payoneer + 💳 Wise

- {maskLast5(profile?.payoneerAccount)} + {maskLast5(profile?.wiseEmail)}

)} @@ -129,8 +140,9 @@ const Settings: React.FC = () => {
- {/* Change Password Modal */} + {/* Modal */} setModalOpen(false)} /> + setShowPaymentModal(false)} /> ); }; diff --git a/src/ui/store/profileSlice.tsx b/src/ui/store/profileSlice.tsx index eca87d4..35f250d 100644 --- a/src/ui/store/profileSlice.tsx +++ b/src/ui/store/profileSlice.tsx @@ -19,6 +19,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; paymentMethod:string; payoneerAccount:string; veemAccount:string; + wiseEmail:string _id: string; } diff --git a/types.d.ts b/types.d.ts index 062dd79..6eb395d 100644 --- a/types.d.ts +++ b/types.d.ts @@ -83,6 +83,7 @@ interface ProfileData { paymentMethod: string; payoneerAccount: string; veemAccount: string; + wiseEmail:string _id: string; }