jai #13
|
|
@ -49,8 +49,8 @@ const App = () => {
|
|||
{/* <Route path="/transactions/:filterParam" element={<Transactions />} /> */}
|
||||
<Route path="/templates" element={<Templates />} />
|
||||
{/* </Route> */}
|
||||
|
||||
<Route path="/contacts" element={<Contacts />} />
|
||||
{/* </Route> */}
|
||||
|
||||
<Route path="/s/:page1" element={<Setting />} />
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -213,10 +213,6 @@ const Account = () => {
|
|||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleTransactionClick = (id: number) => {
|
||||
navigate(`/accounts/${activeAccountId}/transactions/${id}`);
|
||||
};
|
||||
|
||||
const handleInvite = async (data: { i_accountName: number; email: string; role: string }) => {
|
||||
setInviteLoading(true);
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
|
|||
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
|
||||
import api from '../../config/api';
|
||||
import { Transaction } from '../transactions/Transactions';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FaCheck } from 'react-icons/fa';
|
||||
|
||||
|
||||
|
||||
|
|
@ -16,10 +18,12 @@ const TransactionDataTable = () => {
|
|||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const fetchTransactions = async () => {
|
||||
console.log("fetchTransactions")
|
||||
try {
|
||||
const response = await api(`/api/accounts/${activeAccountId}/transactions`);
|
||||
const response = await api.get(`/api/accounts/${activeAccountId}/transactions?sortBy=lastModifiedAt desc`);
|
||||
setTransactions(response.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
|
|
@ -28,6 +32,10 @@ const TransactionDataTable = () => {
|
|||
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
|
||||
const handleTransactionClick = (id: number) => {
|
||||
navigate(`/accounts/${activeAccountId}/transactions/${id}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeAccountId) {
|
||||
fetchTransactions();
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const ProcessStepOne = () => {
|
|||
console.log("selectedRecipients", selectedRecipients)
|
||||
|
||||
useEffect(() => {
|
||||
// <<<<<<< HEAD
|
||||
// <<<<<<< HEAD
|
||||
// Fetching Transaction Details - START
|
||||
(async () => {
|
||||
try {
|
||||
|
|
@ -75,18 +75,19 @@ const ProcessStepOne = () => {
|
|||
console.log("Error - transactions details")
|
||||
}
|
||||
})()
|
||||
// Fetching Transaction Details - END
|
||||
// Fetching Transaction Details - END
|
||||
|
||||
// =======
|
||||
// (async () => {
|
||||
// const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
// console.log(res.data);
|
||||
// })()
|
||||
// >>>>>>> origin/main
|
||||
(async () => {
|
||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
console.log(res.data);
|
||||
})()
|
||||
// =======
|
||||
// (async () => {
|
||||
// const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
// console.log(res.data);
|
||||
// })()
|
||||
// >>>>>>> origin/main
|
||||
|
||||
// (async () => {
|
||||
// const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
// console.log(res.data);
|
||||
// })()
|
||||
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
|
|
@ -315,9 +316,9 @@ const ProcessStepOne = () => {
|
|||
<p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="add-tags-btn-step-one"
|
||||
className='flex items-center gap-3'>
|
||||
<div
|
||||
id="add-tags-btn-step-one"
|
||||
className='flex items-center gap-3'>
|
||||
<button
|
||||
onClick={() => handleNextClick(false)}
|
||||
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition"
|
||||
|
|
@ -364,7 +365,7 @@ const ProcessStepOne = () => {
|
|||
ref={topRef}
|
||||
className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}
|
||||
>
|
||||
|
||||
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { AiFillSignature } from 'react-icons/ai';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { LuGitGraph } from 'react-icons/lu';
|
||||
import AccountNav from '../accounts/AccountNav';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
|
@ -7,6 +7,8 @@ import api from '../../config/api';
|
|||
import SigningOrderDiagram from '../../SigningOrderDiagram ';
|
||||
import { IoCloseOutline } from 'react-icons/io5';
|
||||
import { MdEditDocument } from "react-icons/md";
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '../../store/store';
|
||||
|
||||
// Sample recipient data — you can replace this with actual API data later
|
||||
const recipients = [
|
||||
|
|
@ -30,8 +32,8 @@ const recipients = [
|
|||
|
||||
const TransactionView = () => {
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
console.log("account" , accountId , transactionId)
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
|
|
@ -40,6 +42,8 @@ const TransactionView = () => {
|
|||
|
||||
const [transactionDetails, setTransactionDetails] = useState(null);
|
||||
const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
|
||||
const user = useSelector((state: RootState) => state.user)
|
||||
|
||||
console.log(transactionDetails, "line 37");
|
||||
|
||||
const fetchData = async () => {
|
||||
|
|
@ -56,6 +60,11 @@ const TransactionView = () => {
|
|||
fetchData()
|
||||
}, [accountId, transactionId])
|
||||
|
||||
|
||||
const handleNavigateToSign = (id: number) => {
|
||||
window.open(`./../../../../sign/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{transactionDetails &&
|
||||
|
|
@ -64,17 +73,17 @@ const TransactionView = () => {
|
|||
<div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<h1 className='text-lg font-semibold text-gray-800'>
|
||||
Complete with Forms Made Easy: <span className='text-slate-600'>{ transactionDetails?.transaction?.subject ?? "Untitled"}</span>
|
||||
Complete with Forms Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
|
||||
</h1>
|
||||
|
||||
<div className='mt-2'>
|
||||
{/* new Date(transactionDetails?.transaction?.lastModifiedAt * 1000) */}
|
||||
<p className='text-slate-600'>From <span className='text-blue-600'>Shanu.R</span></p>
|
||||
<p className='text-slate-600'>From <span className='text-blue-600'>{transactionDetails?.transaction.createdBy.firstName + " " + transactionDetails?.transaction.createdBy.lastName}</span></p>
|
||||
<p className=''><span className='text-slate-600 font-semibold'>Last Change on</span> <span className='text-slate-400'>{new Date(transactionDetails?.transaction?.lastModifiedAt * 1000).toISOString()}</span></p>
|
||||
<p className='text-slate-600'>Created at <span>{new Date(transactionDetails?.transaction?.createdAt * 1000).toISOString()}</span></p>
|
||||
</div>
|
||||
|
||||
<p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>Draft</p>
|
||||
<p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>{transactionDetails?.transaction.status}</p>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className='my-2 flex gap-2'>
|
||||
|
|
@ -97,51 +106,66 @@ const TransactionView = () => {
|
|||
<hr className='my-6 border-slate-200' />
|
||||
|
||||
{/* Recipients Section */}
|
||||
{transactionDetails.recipients.length > 0 &&
|
||||
<div>
|
||||
<div className='flex justify-between items-center text-md'>
|
||||
<h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
|
||||
<p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
|
||||
<LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
|
||||
Signing Graph
|
||||
</p>
|
||||
</div>
|
||||
{transactionDetails.recipients.length > 0 &&
|
||||
<div>
|
||||
<div className='flex justify-between items-center text-md'>
|
||||
<h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
|
||||
<p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
|
||||
<LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
|
||||
Signing Graph
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Recipients List */}
|
||||
{transactionDetails.recipients.map((recipient, index) => (
|
||||
<div key={index}>
|
||||
<div className='mt-2 flex justify-between items-center'>
|
||||
<div className='flex gap-8 items-center'>
|
||||
<p className='text-slate-600'>{recipient.id}</p>
|
||||
<div>
|
||||
<p className='text-slate-600 font-semibold'>{recipient.name}</p>
|
||||
<p className='text-slate-600'>{recipient.email}</p>
|
||||
{recipient.hostEmail !== null && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
|
||||
{/* Recipients List */}
|
||||
{transactionDetails.recipients.map((recipient, index) => (
|
||||
<div key={index}>
|
||||
<div className='mt-2 flex justify-between items-center'>
|
||||
<div className='flex gap-8 items-center'>
|
||||
{/* <p className='text-slate-600'>{index+1}</p> */}
|
||||
<div>
|
||||
<p className='text-slate-600 font-semibold'>{recipient.name}</p>
|
||||
<p className='text-slate-600'>{recipient.email}</p>
|
||||
{recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col leading-4.5 items-start text-md text-slate-600 pr-18'>
|
||||
<div className='flex gap-1 items-center relative'>
|
||||
<AiFillSignature className='absolute left-[-30px] text-[1rem]' />
|
||||
<p className='text-black font-semibold'>{recipient.status}</p>
|
||||
</div>
|
||||
{recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
|
||||
{/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
|
||||
<div className='flex flex-col leading-4.5 items-start text-md text-slate-600'>
|
||||
<div className='flex gap-3 items-center relative'>
|
||||
<div className='flex gap-1 items-center relative'>
|
||||
<AiFillSignature className='absolute left-[-30px] text-[1rem]' />
|
||||
<p className='text-black font-semibold'>{recipient.status}</p>
|
||||
</div>
|
||||
{recipient.email === user.email &&
|
||||
<p
|
||||
onClick={() => handleNavigateToSign(recipient.id)}
|
||||
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'>
|
||||
Sign
|
||||
</p>}
|
||||
</div>
|
||||
{recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
|
||||
{/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
|
||||
View signed location
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
<hr className='my-2 border-slate-200' />
|
||||
</div>
|
||||
<hr className='my-2 border-slate-200' />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<div>
|
||||
<h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
|
||||
<p className='mt-2 text-slate-600'>{ transactionDetails?.transaction?.message ?? "No Message Found...!"}</p>
|
||||
</div>
|
||||
{transactionDetails?.transaction?.subject !== "" &&
|
||||
<div>
|
||||
<h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Subject</h2>
|
||||
<p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.subject ? transactionDetails?.transaction?.subject : "Not Found"} `}</p>
|
||||
</div>}
|
||||
|
||||
{transactionDetails?.transaction?.message !== "" &&
|
||||
<div>
|
||||
<h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
|
||||
<p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.message ? transactionDetails?.transaction?.message : "Not Found"} `}</p>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
<div className='w-[210px] text-xs rounded-sm '>
|
||||
|
|
@ -152,10 +176,10 @@ const TransactionView = () => {
|
|||
<img style={{ width: "200px", height: "160px" }} src="https://images.unsplash.com/photo-1746469535771-71a672e8719f?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
|
||||
<div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
|
||||
<p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
|
||||
<span> 1 of 10</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16}/></Link></span>
|
||||
</p>
|
||||
|
||||
<span> 1 of 10</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -165,7 +189,7 @@ const TransactionView = () => {
|
|||
|
||||
</div>
|
||||
|
||||
{signingOrderModal.open &&
|
||||
{signingOrderModal.open &&
|
||||
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center overflow-hidden">
|
||||
<div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full ">
|
||||
<div className="pb-2 text-white flex justify-between items-center bg-[var(--primary)] px-2 py-3 rounded-t-lg">
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const JoyrideController = () => {
|
|||
target: "body", // This makes the welcome step show in center of screen
|
||||
content: (
|
||||
<div>
|
||||
<p>👋 Welcome to SME, Let's Start the tour</p>
|
||||
<p>👋 Hi there! Welcome to SME. Let’s start signing.</p>
|
||||
</div>
|
||||
),
|
||||
placement: "center",
|
||||
|
|
|
|||
Loading…
Reference in New Issue