Compare commits
No commits in common. "7973f8f9343985e694ac08230ee1c8fec225c1c4" and "204d41cdc473ea0f623022ddf9efca92efc41ebe" have entirely different histories.
7973f8f934
...
204d41cdc4
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 92 KiB |
|
|
@ -19,8 +19,6 @@ import {
|
|||
FaCalendarAlt
|
||||
} from 'react-icons/fa';
|
||||
import TransactionDataTable from "./TransactionDataTable";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../store/store";
|
||||
|
||||
interface Transaction {
|
||||
id: number;
|
||||
|
|
@ -123,8 +121,6 @@ const Account = () => {
|
|||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const userData = useSelector((state: RootState) => state.user);
|
||||
|
||||
// const getUserDetails = async () => {
|
||||
// try {
|
||||
// let res = await api.get('/api/user/details')
|
||||
|
|
@ -174,7 +170,7 @@ const Account = () => {
|
|||
};
|
||||
|
||||
try {
|
||||
const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
|
||||
const res = await api.get('/api/dashboard', { params: payload });
|
||||
console.log("Dashboard Data:", res.data);
|
||||
const cardDataArray = mapApiDataToCards(res.data);
|
||||
setCards(cardDataArray);
|
||||
|
|
@ -249,12 +245,12 @@ const Account = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
<Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
|
||||
isLoading={isLoading} />
|
||||
|
||||
<TransactionDataTable />
|
||||
|
||||
<TransactionDataTable />
|
||||
|
||||
{isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
|
||||
accountOptions={accountsData} />}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import ContactFormModal, { ContactData } from './ContactsFormModal';
|
|||
import { Bounce, toast } from 'react-toastify';
|
||||
import { IoMdAdd } from 'react-icons/io';
|
||||
import LoaderUi from '../../helper/LoaderUi';
|
||||
import logoRecord from '../../assets/record.svg'
|
||||
|
||||
type ContactSchema = [{
|
||||
id: number,
|
||||
|
|
@ -147,16 +146,8 @@ const Contacts = () => {
|
|||
</tr>
|
||||
) : contacts.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="4" className="text-center py-10 text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<img
|
||||
src={logoRecord}
|
||||
alt="Record Not Found"
|
||||
className="w-70 h-70 mb-4 opacity-70" // adjust size and appearance
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<td colSpan="4" className="text-center py-4">No contacts found.</td>
|
||||
</tr>
|
||||
) : (
|
||||
contacts.map((contact) => (
|
||||
<tr key={contact.id} className="hover:bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ import {
|
|||
FaFilter,
|
||||
FaCalendarAlt
|
||||
} from 'react-icons/fa';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '../../store/store';
|
||||
|
||||
interface CardData {
|
||||
title: string;
|
||||
|
|
@ -84,8 +82,6 @@ const Home = () => {
|
|||
const [cards, setCards] = useState<CardData[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
const userData = useSelector((state : RootState) => state.user);
|
||||
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
console.log("cards", cards);
|
||||
|
||||
|
|
@ -98,7 +94,7 @@ const Home = () => {
|
|||
};
|
||||
|
||||
try {
|
||||
const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
|
||||
const res = await api.get('/api/dashboard', { params: payload });
|
||||
setDashboardData(res.data);
|
||||
console.log("Dashboard Data:", res.data);
|
||||
const cardDataArray = mapApiDataToCards(res.data);
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
|
|||
import Loader from "../../dashboard/Loader";
|
||||
import confetti from 'canvas-confetti'
|
||||
import { IoClose } from "react-icons/io5";
|
||||
import { IoMdClose, IoMdHome } from "react-icons/io";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import { IoMdHome } from "react-icons/io";
|
||||
|
||||
type Signer = {
|
||||
id: number;
|
||||
|
|
@ -223,19 +222,6 @@ const DocumentCompletionScreen = () => {
|
|||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// toast.dismiss();
|
||||
// toast.success("Your document has been successfully sent for signature.", {
|
||||
// position: "top-center",
|
||||
// autoClose: 1500,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// transition: Bounce,
|
||||
// });
|
||||
|
||||
if (showConfetti) {
|
||||
const duration = 3000;
|
||||
const end = Date.now() + duration;
|
||||
|
|
@ -247,63 +233,76 @@ const DocumentCompletionScreen = () => {
|
|||
}
|
||||
|
||||
confetti({
|
||||
particleCount: 5, // fewer particles per burst for smoothness
|
||||
angle: 90, // falling straight down
|
||||
spread: 30, // slight spread
|
||||
startVelocity: 8, // gentle falling speed
|
||||
particleCount: 80, // more particles
|
||||
angle: Math.random() * 360, // fire in random direction
|
||||
spread: 220, // wider spread
|
||||
startVelocity: 15, // more power
|
||||
scalar: 1.2, // bigger pieces (default is 1)
|
||||
origin: {
|
||||
x: Math.random(), // random horizontal position across the top
|
||||
y: 0,
|
||||
x: Math.random(),
|
||||
y: Math.random() * 0.6,
|
||||
},
|
||||
scalar: 1,
|
||||
zIndex: 9999,
|
||||
});
|
||||
}, 50); // fire every 50ms for continuous effect
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, 350); // fire every 150ms
|
||||
}
|
||||
}, [showConfetti]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
{
|
||||
showConfetti && (
|
||||
<div className="absolute top-0 left-0 w-full h-full z-[9999] bg-white/80 backdrop-blur-sm flex items-center justify-center">
|
||||
{/* <Confetti width={width} height={height} /> */}
|
||||
|
||||
<div className="relative bg-white bg-opacity-90 backdrop-blur-lg border border-green-200 shadow-xl rounded-md px-8 py-6 w-[90%] max-w-sm text-center animate-fade-in-up">
|
||||
{/* Close Icon */}
|
||||
<button
|
||||
onClick={() => setShowConfetti(false)} // or whatever logic hides the modal
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
|
||||
aria-label="Close"
|
||||
>
|
||||
<IoClose className="text-2xl" />
|
||||
</button>
|
||||
|
||||
{/* Success Icon */}
|
||||
<FaCheckCircle className="text-green-500 text-5xl mb-4 mx-auto drop-shadow-lg" />
|
||||
|
||||
{/* Message */}
|
||||
<h2 className="text-2xl font-semibold text-gray-800 mb-1">Transaction Successful</h2>
|
||||
<p className="text-gray-600 text-sm">Your transaction has been created and saved successfully.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
<div className="min-h-screen bg-[var(--mainViewBg)]">
|
||||
{/* Top Banner */}
|
||||
<div className='fixed top-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Link to={"/"}>
|
||||
<IoMdHome
|
||||
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-base font-normal text-gray-700 border-l pl-4">🎉 Awesome! The document’s been sent for signature. 🎉</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="add-tags-btn-step-one"
|
||||
className='flex items-center gap-3'>
|
||||
|
||||
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
|
||||
<FaPen className=" text-white text-md" />
|
||||
<span className="tracking-wide text-white">Edit</span>
|
||||
</Link>
|
||||
|
||||
{/* <button
|
||||
onClick={() => handleNextClick(false)}
|
||||
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
{signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
|
||||
</button> */}
|
||||
|
||||
<div className="w-full px-6 py-2 bg-white border-b rounded-sm border-gray-200">
|
||||
<div className="max-w-[97vw] mx-auto px-2 py-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to='/' className="w-5 h-5 text-green-700 rounded-full flex items-center justify-center">
|
||||
<IoMdHome className="h-10 w-10" />
|
||||
</Link>
|
||||
{/* <div className="w-5 h-5 bg-white text-green-800 rounded-full flex items-center justify-center">
|
||||
<FaCheck className="text-sm" />
|
||||
</div> */}
|
||||
<div>
|
||||
<h2 className="text-md font-semibold text-gray-900">Awesome! Your document is sent for signature</h2>
|
||||
</div>
|
||||
</div>
|
||||
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
|
||||
<FaPen className=" text-white text-md" />
|
||||
<span className="tracking-wide text-white">Edit</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{(selectedRecipients.length > 0 && selectedDocuments.length > 0) ?
|
||||
<div className="p-3 mt-[55px]">
|
||||
<div className="p-3">
|
||||
<div className="max-w-[97vw] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
|
||||
|
|
@ -343,7 +342,7 @@ const DocumentCompletionScreen = () => {
|
|||
<SigningOrderDiagram signers={selectedRecipients} />
|
||||
|
||||
{/* Signers List */}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -196,7 +196,6 @@ const ProcessStepOne = () => {
|
|||
const recipientsData = selectedRecipients.map((recipient, index) => ({
|
||||
id: "id" in recipient ? recipient.id : null,
|
||||
routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
|
||||
provideOwnTags: userData.email === recipient.email ? true : false,
|
||||
type: recipient.type,
|
||||
firstName: recipient.firstName,
|
||||
lastName: recipient.lastName,
|
||||
|
|
@ -265,16 +264,19 @@ const ProcessStepOne = () => {
|
|||
}
|
||||
|
||||
} else {
|
||||
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
}
|
||||
dispatch(showLoader("Processing Message..."));
|
||||
|
||||
console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
|
||||
let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
|
||||
name: templateName,
|
||||
subject: emailDtls.subject, message: emailDtls.message,
|
||||
status: "CREATED"
|
||||
})
|
||||
|
||||
console.log("Line 158", res.data)
|
||||
if (isSendNow) {
|
||||
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { FiEdit, FiTrash } from "react-icons/fi";
|
|||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
|
||||
|
||||
interface ContactType {
|
||||
id: string;
|
||||
email: string;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import Loader from '../../dashboard/Loader';
|
|||
// import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
|
||||
import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
|
||||
import { IsSendInterface } from './ProcessStepTwo';
|
||||
|
||||
export interface DroppedItemsObj {
|
||||
[key: string]: DroppedItem[]
|
||||
|
|
@ -66,7 +65,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
||||
|
||||
const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
|
||||
|
||||
|
||||
|
|
@ -75,12 +74,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
}, [])
|
||||
|
||||
console.log(droppedItems, "line 78")
|
||||
|
||||
// FETCHING TAG - START
|
||||
useEffect(() => {
|
||||
if (selectedRecipients.length === 0) return;
|
||||
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const requests = selectedRecipients.map((recipient) =>
|
||||
|
|
@ -180,22 +176,17 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
|
||||
})
|
||||
)
|
||||
|
||||
console.log(droppedItemsUpdateFalse, "Line 182")
|
||||
|
||||
setDroppedItems(droppedItemsUpdateFalse);
|
||||
} catch (error) {
|
||||
console.error("Error submitting recipient tags:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Save Tags - START
|
||||
useEffect(() => {
|
||||
if (isSend === null) return;
|
||||
|
||||
const handleTransactionProcess = async (save: boolean = false) => {
|
||||
console.log(droppedItems, "called Line 189");
|
||||
|
||||
if (!save && isSend === null) return;
|
||||
|
||||
!save && dispatch(showLoader("Loading ..."))
|
||||
dispatch(showLoader("Loading ..."))
|
||||
|
||||
let updatedTags = { ...droppedItems }
|
||||
|
||||
|
|
@ -300,37 +291,17 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
tagsData = groupByRecipientId(tagsData);
|
||||
|
||||
console.log(tagsData, "Line 302");
|
||||
sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||
|
||||
await sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||
|
||||
|
||||
// SENDING Transaction - START
|
||||
// if (!save) {
|
||||
// const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
// // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
|
||||
// console.log(res, "Check123")
|
||||
// dispatch(hideLoader())
|
||||
// }
|
||||
|
||||
// SENDING Transaction - END
|
||||
|
||||
}
|
||||
|
||||
// Save Tags - START
|
||||
useEffect(() => {
|
||||
handleTransactionProcess()
|
||||
(async () => {
|
||||
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
// const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
|
||||
console.log(res, "Check123")
|
||||
dispatch(hideLoader())
|
||||
})()
|
||||
}, [isSend])
|
||||
// Save Tags - END
|
||||
|
||||
// useEffect(() => {
|
||||
// setTimeout(() => {
|
||||
// setInterval(async () => {
|
||||
// await handleTransactionProcess(true);
|
||||
// }, 8000)
|
||||
// }, 8000)
|
||||
// }, [])
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault(); // Allows the drop event to work
|
||||
};
|
||||
|
|
@ -1055,9 +1026,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
|
||||
const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<>
|
||||
<div
|
||||
// key={index}
|
||||
key={index}
|
||||
draggable="false"
|
||||
className="absolute rounded dropped-item"
|
||||
onClick={() => handleTagClick(key, index)}
|
||||
|
|
@ -1119,22 +1090,20 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
</div>
|
||||
|
||||
<>
|
||||
{
|
||||
"group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
|
||||
<>
|
||||
<div className="group-border" border-group={item.group} border-pos="top"></div>
|
||||
<div className="group-border" border-group={item.group} border-pos="right"></div>
|
||||
<div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
|
||||
<div onClick={() => handleAddGroupItemClicked(key, item)}><IoAdd /></div>
|
||||
</div>
|
||||
<div className="group-border" border-group={item.group} border-pos="left"></div>
|
||||
</>
|
||||
{
|
||||
"group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
|
||||
<>
|
||||
<div className="group-border" border-group={item.group} border-pos="top"></div>
|
||||
<div className="group-border" border-group={item.group} border-pos="right"></div>
|
||||
<div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
|
||||
<div onClick={() => handleAddGroupItemClicked(key, item)}><IoAdd /></div>
|
||||
</div>
|
||||
<div className="group-border" border-group={item.group} border-pos="left"></div>
|
||||
</>
|
||||
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
</React.Fragment>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -1177,11 +1146,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
</div >
|
||||
|
||||
{
|
||||
console.log(selectedTag, droppedItems, "Line 1175")
|
||||
}
|
||||
|
||||
{selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
|
||||
{selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
|
||||
onMove: directionalControlsHandler,
|
||||
onPositionChange: handleDirectPositionChange,
|
||||
disabled: false,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { FaCheck, FaSignature } from 'react-icons/fa'
|
|||
import { IoIosDocument } from 'react-icons/io'
|
||||
import { LuTableOfContents } from 'react-icons/lu'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { RiResetRightLine } from 'react-icons/ri'
|
||||
import { RiResetLeftLine, RiResetRightLine } from 'react-icons/ri'
|
||||
import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
|
|
@ -66,83 +66,42 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
|
|||
|
||||
const [isFitDd, setIsFitDd] = useState<boolean>(false)
|
||||
const [selFitIndx, setSelFitIndx] = useState<number>(0);
|
||||
const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 });
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
const userDetails = useSelector((state: RootState) => state.user);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRecipients.length || selectedDocuments.length) return;
|
||||
(async () => {
|
||||
selectedRecipients.length === 0 && await dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && await dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
})()
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRecipients.length > 0) {
|
||||
let minRoutingOrder: number = Infinity;
|
||||
let userEmailPresent = {
|
||||
present: false,
|
||||
routingOrder: 0,
|
||||
recipientId: 0
|
||||
};
|
||||
// Getting Minimum RoutingOrder
|
||||
for (let i = 0; i < selectedRecipients.length; i++) {
|
||||
const recipient = selectedRecipients[i]
|
||||
if (recipient.routingOrder < minRoutingOrder) {
|
||||
minRoutingOrder = recipient.routingOrder;
|
||||
}
|
||||
|
||||
if (recipient.email === userDetails.email) {
|
||||
userEmailPresent.present = true;
|
||||
userEmailPresent.routingOrder = recipient.routingOrder;
|
||||
userEmailPresent.recipientId = recipient.id;
|
||||
}
|
||||
}
|
||||
|
||||
if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder) {
|
||||
setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
|
||||
}
|
||||
}
|
||||
}, [selectedRecipients])
|
||||
|
||||
const [nav2RecToggle, setNav2RecToggle] = useState<boolean>(false);
|
||||
const [nav2DocToggle, setNav2DocToggle] = useState<boolean>(false);
|
||||
|
||||
function handleSend(isSignSend: boolean = false) {
|
||||
function handleSend() {
|
||||
// dispatch(showLoader("Loading ..."));
|
||||
if (isSend === null) {
|
||||
setIsSend(false);
|
||||
}
|
||||
setIsSend(!isSend);
|
||||
|
||||
setTimeout(() => {
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
if (isSignSend) {
|
||||
navigate(`./../../../sign/${selfUserSign.recipientId}`);
|
||||
}
|
||||
// else {
|
||||
// navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||
// }
|
||||
} else {
|
||||
navigate(`/templates`);
|
||||
toast.success("Template Saved...!", {
|
||||
position: "top-center",
|
||||
autoClose: 1500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
}, 0)
|
||||
setIsSend(!isSend)
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||
} else {
|
||||
navigate(`/templates`);
|
||||
toast.success("Template Saved...!", {
|
||||
position: "top-center",
|
||||
autoClose: 1500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetIsFields = (setTo: boolean) => {
|
||||
|
|
@ -164,24 +123,24 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
|
|||
zoom(Number(indx), 'zoom-con')
|
||||
}, [selFitIndx])
|
||||
|
||||
// useEffect(() => {
|
||||
// let timeoutId: number;
|
||||
// const timeOutIn = 8000;
|
||||
useEffect(() => {
|
||||
let timeoutId: number;
|
||||
const timeOutIn = 8000;
|
||||
|
||||
// const updateLabel = () => {
|
||||
// if (document.visibilityState === 'visible') {
|
||||
// setTransactionSaving(true);
|
||||
// setTimeout(() => {
|
||||
// setTransactionSaving(false);
|
||||
// }, 4000)
|
||||
// }
|
||||
// timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
// };
|
||||
// timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
const updateLabel = () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
setTransactionSaving(true);
|
||||
setTimeout(() => {
|
||||
setTransactionSaving(false);
|
||||
}, 4000)
|
||||
}
|
||||
timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
};
|
||||
timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
|
||||
// // Cleanup on unmount
|
||||
// return () => clearTimeout(timeoutId);
|
||||
// }, []);
|
||||
// Cleanup on unmount
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!transactionSaving) return;
|
||||
|
|
@ -327,15 +286,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
|
|||
</p>
|
||||
<FaSignature className='text-white text-md' />
|
||||
</div>
|
||||
{transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && selfUserSign.sign && <div
|
||||
id='send-and-sign-dash-btn'
|
||||
onClick={() => handleSend(selfUserSign.sign)}
|
||||
className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'>
|
||||
<p className='tracking-wide text-white'>
|
||||
Sign & Send
|
||||
</p>
|
||||
<FaSignature className='text-white text-md' />
|
||||
</div>}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,16 +9,10 @@ import { RootState } from '../../../store/store';
|
|||
import Loader from '../../dashboard/Loader';
|
||||
import { hideLoader } from '../../../store/slices/loaderSlice';
|
||||
|
||||
export interface IsSendInterface {
|
||||
send: boolean | null;
|
||||
save: boolean;
|
||||
}
|
||||
|
||||
const ProcessStepTwo = () => {
|
||||
|
||||
const [isFields, setIsFields] = useState(true);
|
||||
const [selectedRecipient, setSelectedRecipient] = useState(0);
|
||||
|
||||
const [isSend, setIsSend] = useState<boolean | null>(null);
|
||||
const globalLoader = useSelector((state: RootState) => state.loader)
|
||||
const dispatch = useDispatch();
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ const SignatureManager: React.FC = () => {
|
|||
<div className="max-w-[84vw] mx-auto">
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1>
|
||||
<p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
|
||||
|
|
@ -126,7 +126,7 @@ const SignatureManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Table Card */}
|
||||
<div className="bg-white rounded-md overflow-hidden border border-gray-100">
|
||||
<div className="bg-white rounded-md shadow-md overflow-hidden border border-gray-100">
|
||||
{/* Table Header */}
|
||||
<div className="bg-gray-50 border-b border-gray-200">
|
||||
<div className="grid grid-cols-12 gap-4 px-6 py-4">
|
||||
|
|
@ -206,7 +206,7 @@ const SignatureManager: React.FC = () => {
|
|||
|
||||
{/* Dropdown Menu */}
|
||||
{activeDropdown === signature.id && (
|
||||
<div className="absolute right-0 mt-0.5 w-28 bg-white rounded-lg border border-gray-200 z-10 py-1">
|
||||
<div className="absolute right-0 mt-0.5 w-28 bg-white rounded-lg shadow-xl border border-gray-200 z-10 py-1">
|
||||
<button
|
||||
onClick={() => handleEdit(signature.id)}
|
||||
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm transition-colors duration-150"
|
||||
|
|
@ -232,7 +232,7 @@ const SignatureManager: React.FC = () => {
|
|||
|
||||
{/* Empty State (if no signatures) */}
|
||||
{signatures.length === 0 && (
|
||||
<div className=" rounded-xl p-12 text-center mt-8">
|
||||
<div className=" rounded-xl shadow-lg p-12 text-center mt-8">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<FiEdit3 className="w-16 h-16 mx-auto" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
|
|||
<div className="bg-white rounded-md shadow-sm flex w-full p-6">
|
||||
{/* Profile Picture */}
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="w-20 h-20 bg-[var(--primary)] text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
|
||||
<div className="w-20 h-20 bg-green-800 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
|
||||
{userData.name.slice(0,2).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { useNavigate } from "react-router-dom";
|
|||
import { useSelector } from "react-redux";
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import LoaderUi from "../../helper/LoaderUi";
|
||||
import logoRecord from '../../assets/record.svg';
|
||||
|
||||
|
||||
|
||||
|
|
@ -86,8 +85,8 @@ const Templates = () => {
|
|||
}
|
||||
|
||||
const handleEditClick = (templateId: string) => {
|
||||
setShowMenu(null);
|
||||
navigate(`/process-step-one/${accountId}/template/${templateId}`);
|
||||
setShowMenu(null);
|
||||
navigate(`/process-step-one/${accountId}/template/${templateId}`);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -210,16 +209,9 @@ const Templates = () => {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="6" className="text-center py-10 text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<img
|
||||
src={logoRecord}
|
||||
alt="Record Not Found"
|
||||
className="w-70 h-70 mb-4 opacity-70" // adjust size and appearance
|
||||
/>
|
||||
</div>
|
||||
No templates found.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ const TransactionView = () => {
|
|||
<div className='mt-2'>
|
||||
{/* new Date(transactionDetails?.transaction?.lastModifiedAt * 1000) */}
|
||||
<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'>{(transactionDetails?.transaction?.lastModifiedAt)}</span></p>
|
||||
<p className='text-slate-600'>Created at <span>{(transactionDetails?.transaction?.createdAt)}</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'>{transactionDetails?.transaction.status}</p>
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
declare module '*.png' {
|
||||
const value: string;
|
||||
export default value;
|
||||
}
|
||||
Loading…
Reference in New Issue