Compare commits
No commits in common. "002c8e61105d4b69551e948a15f8a6791a347916" and "9a2aed3c02f180cf349bba042b26becdb6c4a1dd" have entirely different histories.
002c8e6110
...
9a2aed3c02
|
|
@ -22,6 +22,7 @@ import Templates from "./components/templates/Templates";
|
||||||
import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen";
|
import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen";
|
||||||
import JoyrideController from "./utlity/JoyRideTour";
|
import JoyrideController from "./utlity/JoyRideTour";
|
||||||
import Contacts from "./components/contacts/Contacts";
|
import Contacts from "./components/contacts/Contacts";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -17,32 +17,6 @@ const SignCompletionScreen: React.FC = () => {
|
||||||
const [showDownloadModal, setShowDownloadModal] = useState(false);
|
const [showDownloadModal, setShowDownloadModal] = useState(false);
|
||||||
const [animationPhase, setAnimationPhase] = useState(0);
|
const [animationPhase, setAnimationPhase] = useState(0);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const currentPath = window.location.pathname;
|
|
||||||
|
|
||||||
const handlePopState = (event) => {
|
|
||||||
// Show warning
|
|
||||||
// alert("Back navigation is blocked on this screen.");
|
|
||||||
|
|
||||||
// Push the current URL back to prevent navigating away
|
|
||||||
window.history.pushState(null, "", currentPath);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Push extra states to build history buffer
|
|
||||||
for (let i = 0; i < 50; i++) {
|
|
||||||
window.history.pushState(null, "", currentPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add popstate listener
|
|
||||||
window.addEventListener("popstate", handlePopState);
|
|
||||||
|
|
||||||
// Cleanup on unmount
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("popstate", handlePopState);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Trigger animation phases sequentially
|
// Trigger animation phases sequentially
|
||||||
const timers = [
|
const timers = [
|
||||||
|
|
@ -327,7 +301,7 @@ const SignCompletionScreen: React.FC = () => {
|
||||||
>
|
>
|
||||||
{/* <a> */}
|
{/* <a> */}
|
||||||
<IoMdArrowRoundBack className="w-5 h-5 mr-3" />
|
<IoMdArrowRoundBack className="w-5 h-5 mr-3" />
|
||||||
Back to Sign Made Easy
|
Back Sign Made Easy
|
||||||
{/* </a> */}
|
{/* </a> */}
|
||||||
</a> :
|
</a> :
|
||||||
<a
|
<a
|
||||||
|
|
@ -347,7 +321,7 @@ const SignCompletionScreen: React.FC = () => {
|
||||||
{/* Additional Info */}
|
{/* Additional Info */}
|
||||||
<div className={`mt-8 pt-3 border-t border-gray-200 border-opacity-50`}>
|
<div className={`mt-8 pt-3 border-t border-gray-200 border-opacity-50`}>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
Your document is signed and saved. Download it or return to Sign Made Easy to continue — navigation is paused until an action is taken.
|
Your document is signed and ready. You can download it or return to the sign made easy.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -134,7 +134,7 @@ const Contacts = () => {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm no-scrollbar ">
|
<div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm no-scrollbar">
|
||||||
<table className="min-w-full text-sm bg-white">
|
<table className="min-w-full text-sm bg-white">
|
||||||
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
|
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -162,7 +162,7 @@ const Contacts = () => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
contacts.map((contact, index) => (
|
contacts.map((contact) => (
|
||||||
<tr key={contact.id} className="hover:bg-gray-50">
|
<tr key={contact.id} className="hover:bg-gray-50">
|
||||||
<td className="px-4 py-3">{contact.firstName}</td>
|
<td className="px-4 py-3">{contact.firstName}</td>
|
||||||
<td className="px-4 py-3">{contact.lastName}</td>
|
<td className="px-4 py-3">{contact.lastName}</td>
|
||||||
|
|
@ -181,7 +181,7 @@ const Contacts = () => {
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{openMenuId === contact.id && (
|
{openMenuId === contact.id && (
|
||||||
<div className={`absolute mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px] ${(contacts.length - 1) === index ? "bottom-1 right-4" : "bottom-0 right-5"}`}>
|
<div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
|
||||||
<button
|
<button
|
||||||
onMouseDown={() => handleEdit(contact.id)}
|
onMouseDown={() => handleEdit(contact.id)}
|
||||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
|
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ const StartNow = () => {
|
||||||
<div
|
<div
|
||||||
onClick={() => fileInputRef.current?.click()}
|
onClick={() => fileInputRef.current?.click()}
|
||||||
id='start-now-upload-con'
|
id='start-now-upload-con'
|
||||||
className="group col-span-2 cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
|
className="group cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
|
||||||
{/* Upload icon with subtle animation */}
|
{/* Upload icon with subtle animation */}
|
||||||
<div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
|
<div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
|
||||||
<FiUpload className="text-lg" />
|
<FiUpload className="text-lg" />
|
||||||
|
|
|
||||||
|
|
@ -28,17 +28,16 @@ const cards = [
|
||||||
// buttonText: 'Start Now',
|
// buttonText: 'Start Now',
|
||||||
// bg: 'bg-white/60',
|
// bg: 'bg-white/60',
|
||||||
// },
|
// },
|
||||||
// {
|
{
|
||||||
// icon: <FiEdit className="w-5 h-5 text-green-700" />,
|
icon: <FiEdit className="w-5 h-5 text-green-700" />,
|
||||||
// title: 'Sign an Agreement',
|
title: 'Sign an Agreement',
|
||||||
// description: 'Upload a document you need to sign and place your signature.',
|
description: 'Upload a document you need to sign and place your signature.',
|
||||||
// bg: 'bg-white/60',
|
bg: 'bg-white/60',
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
icon: <FiFolder className="w-5 h-5 text-purple-700" />,
|
icon: <FiFolder className="w-5 h-5 text-purple-700" />,
|
||||||
title: 'Use a Template',
|
title: 'Use a Template',
|
||||||
description: 'Pick from ready-made templates for common agreements.',
|
description: 'Pick from ready-made templates for common agreements.',
|
||||||
link: "/templates",
|
|
||||||
bg: 'bg-white/60',
|
bg: 'bg-white/60',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
@ -55,19 +54,19 @@ const StartSection = () => {
|
||||||
|
|
||||||
const defaultAccountId = user.account.id;
|
const defaultAccountId = user.account.id;
|
||||||
|
|
||||||
const handleStartSectionClick = (link: string) => {
|
const handleStartSectionClick = (card: StartCard) => {
|
||||||
// if ("buttonText" in card && card.buttonText === "Start Now") {
|
if ("buttonText" in card && card.buttonText === "Start Now") {
|
||||||
// api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
||||||
// .then(res => {
|
.then(res => {
|
||||||
// if (res.status === 200 || res.status === 201) {
|
if (res.status === 200 || res.status === 201) {
|
||||||
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
||||||
// dispatch(setTransactionId(res.data));
|
dispatch(setTransactionId(res.data));
|
||||||
// setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
|
setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
// .catch(err => console.log(err))
|
.catch(err => console.log(err))
|
||||||
// }
|
}
|
||||||
navigate(link);
|
// navigate("/process-step-one");
|
||||||
}
|
}
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
|
|
@ -88,10 +87,10 @@ const StartSection = () => {
|
||||||
|
|
||||||
<StartNow />
|
<StartNow />
|
||||||
|
|
||||||
<div className='col-span-1 grid grid-cols-1 justify-between gap-4'>
|
<div className='col-span-2 grid grid-cols-2 justify-between gap-4'>
|
||||||
{cards.map((card, index) => (
|
{cards.map((card, index) => (
|
||||||
<div
|
<div
|
||||||
onClick={() => handleStartSectionClick(card.link)}
|
onClick={() => handleStartSectionClick(card)}
|
||||||
key={index}
|
key={index}
|
||||||
className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
|
className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
FaCheck,
|
FaCheck,
|
||||||
FaFileAlt,
|
FaFileAlt,
|
||||||
|
|
@ -15,13 +15,12 @@ import {
|
||||||
import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice";
|
import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice";
|
||||||
import { fetchDocuments } from "../../../store/slices/documentSlice";
|
import { fetchDocuments } from "../../../store/slices/documentSlice";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||||
import Loader from "../../dashboard/Loader";
|
import Loader from "../../dashboard/Loader";
|
||||||
import confetti from 'canvas-confetti'
|
import confetti from 'canvas-confetti'
|
||||||
import { IoClose } from "react-icons/io5";
|
import { IoClose } from "react-icons/io5";
|
||||||
import { IoMdClose, IoMdHome } from "react-icons/io";
|
import { IoMdClose, IoMdHome } from "react-icons/io";
|
||||||
import { Bounce, toast } from "react-toastify";
|
import { Bounce, toast } from "react-toastify";
|
||||||
import api from "../../../config/api";
|
|
||||||
|
|
||||||
type Signer = {
|
type Signer = {
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -201,9 +200,7 @@ const DocumentCompletionScreen = () => {
|
||||||
{ title: 'Document 10', pages: 11 },
|
{ title: 'Document 10', pages: 11 },
|
||||||
{ title: 'Document 11', pages: 4 }, // Won't be shown due to slice
|
{ title: 'Document 11', pages: 4 }, // Won't be shown due to slice
|
||||||
];
|
];
|
||||||
const location = useLocation();
|
|
||||||
const [status, setStatus] = useState(null);
|
|
||||||
console.log("location.pathname", location.pathname, status)
|
|
||||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||||
const [showConfetti, setShowConfetti] = React.useState(true)
|
const [showConfetti, setShowConfetti] = React.useState(true)
|
||||||
if (!accountId || !transactionId) {
|
if (!accountId || !transactionId) {
|
||||||
|
|
@ -268,77 +265,6 @@ const DocumentCompletionScreen = () => {
|
||||||
}, [showConfetti]);
|
}, [showConfetti]);
|
||||||
|
|
||||||
|
|
||||||
console.log("History length:", window.history.length);
|
|
||||||
|
|
||||||
|
|
||||||
// Step 1: Fetch transaction status
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchTransaction = async () => {
|
|
||||||
// /api/accounts/{accountId}/transactions/{trxId}
|
|
||||||
try {
|
|
||||||
const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
|
|
||||||
setStatus(res?.data?.status);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch transaction:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (accountId && transactionId) {
|
|
||||||
fetchTransaction();
|
|
||||||
}
|
|
||||||
}, [accountId, transactionId]);
|
|
||||||
|
|
||||||
// Step 2: Prevent browser back when status === 'SENT'
|
|
||||||
useEffect(() => {
|
|
||||||
if (status === "SENT") {
|
|
||||||
|
|
||||||
const currentPath = window.location.pathname;
|
|
||||||
|
|
||||||
const handlePopState = (event) => {
|
|
||||||
// Show warning
|
|
||||||
alert("Back navigation is blocked on this screen.");
|
|
||||||
|
|
||||||
// Push the current URL back to prevent navigating away
|
|
||||||
window.history.pushState(null, "", currentPath);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Push extra states to build history buffer
|
|
||||||
for (let i = 0; i < 50; i++) {
|
|
||||||
window.history.pushState(null, "", currentPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add popstate listener
|
|
||||||
window.addEventListener("popstate", handlePopState);
|
|
||||||
|
|
||||||
// Cleanup on unmount
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("popstate", handlePopState);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [status]);
|
|
||||||
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (status === 'SENT') {
|
|
||||||
// // Step 1: Push a dummy state to trap the user
|
|
||||||
// window.history.pushState(null, '', window.location.href);
|
|
||||||
|
|
||||||
// // Step 2: Intercept back button
|
|
||||||
// const handlePopState = (event) => {
|
|
||||||
// // Push the same dummy state again to block back
|
|
||||||
// window.history.pushState(null, '', window.location.href);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// window.addEventListener('popstate', handlePopState);
|
|
||||||
|
|
||||||
// return () => {
|
|
||||||
// window.removeEventListener('popstate', handlePopState);
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// }, [status]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -359,8 +285,8 @@ const DocumentCompletionScreen = () => {
|
||||||
className='flex items-center gap-3'>
|
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)]">
|
<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" /> */}
|
<FaPen className=" text-white text-md" />
|
||||||
<span className="tracking-wide text-white">View Transaction</span>
|
<span className="tracking-wide text-white">Edit</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* <button
|
{/* <button
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,6 @@ const ProcessStepOne = () => {
|
||||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||||
const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
|
const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
|
||||||
const [editRecipientCurrentEmail, setEditRecipientCurrentEmail] = useState('')
|
|
||||||
|
|
||||||
console.log()
|
console.log()
|
||||||
const userData = useSelector((state: RootState) => state.user)
|
const userData = useSelector((state: RootState) => state.user)
|
||||||
|
|
@ -96,15 +95,6 @@ const ProcessStepOne = () => {
|
||||||
try {
|
try {
|
||||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
|
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
|
||||||
setTransactionDetails(res.data)
|
setTransactionDetails(res.data)
|
||||||
|
|
||||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
|
||||||
setTemplateName(res.data.name)
|
|
||||||
}
|
|
||||||
|
|
||||||
setEmailDtls(
|
|
||||||
{ subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
|
|
||||||
)
|
|
||||||
|
|
||||||
// console.log("setTransactionDetails",res.data)
|
// console.log("setTransactionDetails",res.data)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log("Error - transactions details")
|
console.log("Error - transactions details")
|
||||||
|
|
@ -143,8 +133,7 @@ const ProcessStepOne = () => {
|
||||||
let formError = {
|
let formError = {
|
||||||
documents: false,
|
documents: false,
|
||||||
recipients: false,
|
recipients: false,
|
||||||
subject: false,
|
subject: false
|
||||||
recipientEmailAndLastName:false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
||||||
|
|
@ -152,32 +141,20 @@ const ProcessStepOne = () => {
|
||||||
formError.documents = true
|
formError.documents = true
|
||||||
}
|
}
|
||||||
if (!selectedRecipients.length) {
|
if (!selectedRecipients.length) {
|
||||||
formError.recipients = true;
|
formError.recipients = true
|
||||||
} else {
|
|
||||||
// Check if all recipients have email and lastName
|
|
||||||
const isValid = selectedRecipients.every(
|
|
||||||
(item) => item.email?.trim() !== '' && item.lastName?.trim() !== ''
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!isValid) {
|
|
||||||
// alert('All recipients must have both Email and Last Name filled.');
|
|
||||||
formError.recipientEmailAndLastName = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if (!emailDtls.subject.length) {
|
if (!emailDtls.subject.length) {
|
||||||
formError.subject = true
|
formError.subject = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (SignTypeEnum.selfSign === signType) formError.recipients = false;
|
if (SignTypeEnum.selfSign === signType) formError.recipients = false;
|
||||||
|
|
||||||
if (formError.documents || formError.recipients || formError.subject || formError.recipientEmailAndLastName) {
|
if (formError.documents || formError.recipients || formError.subject) {
|
||||||
console.log(selectedDocuments, 'line 193')
|
console.log(selectedDocuments, 'line 193')
|
||||||
toast.dismiss();
|
toast.dismiss();
|
||||||
toast.error(`${formError.documents ? "Add Document" : ""}
|
toast.error(`${formError.documents ? "Add Document" : ""}
|
||||||
${(formError.documents && formError.recipients) ? " | " : ""}
|
${(formError.documents && formError.recipients) ? " | " : ""}
|
||||||
${formError.recipients ? "Add Recipient" : ""}
|
${formError.recipients ? "Add Recipient" : ""}
|
||||||
${formError.recipientEmailAndLastName ? "All recipients must have both Email and Last Name." : ""}
|
|
||||||
${(formError.documents || formError.recipients) ? " | " : ""}
|
${(formError.documents || formError.recipients) ? " | " : ""}
|
||||||
${formError.subject ? "Add Subject" : ""}`, {
|
${formError.subject ? "Add Subject" : ""}`, {
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
|
|
@ -288,7 +265,7 @@ const ProcessStepOne = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||||
}
|
}
|
||||||
dispatch(showLoader("Processing Message..."));
|
dispatch(showLoader("Processing Message..."));
|
||||||
|
|
||||||
|
|
@ -448,8 +425,7 @@ const ProcessStepOne = () => {
|
||||||
{
|
{
|
||||||
(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
|
(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
|
||||||
<div className="flex flex-col gap-4 align-start">
|
<div className="flex flex-col gap-4 align-start">
|
||||||
|
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
|
||||||
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
|
|
||||||
{/* {signType !== "self-sign" && <RecipientAddCard />} */}
|
{/* {signType !== "self-sign" && <RecipientAddCard />} */}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -457,7 +433,7 @@ const ProcessStepOne = () => {
|
||||||
className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}
|
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} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
|
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,11 +22,10 @@ interface ContactType {
|
||||||
export interface ContactTypeObj {
|
export interface ContactTypeObj {
|
||||||
type: string;
|
type: string;
|
||||||
contacts: ContactType[];
|
contacts: ContactType[];
|
||||||
setEditRecipientCurrentEmail : any
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef , setEditRecipientCurrentEmail }) => {
|
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef }) => {
|
||||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||||
);
|
);
|
||||||
|
|
@ -242,7 +241,6 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
||||||
type: false,
|
type: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
setEditRecipientCurrentEmail("")
|
|
||||||
setEditCase("");
|
setEditCase("");
|
||||||
setManualFocusTriggered(false);
|
setManualFocusTriggered(false);
|
||||||
formRef.current?.reset();
|
formRef.current?.reset();
|
||||||
|
|
|
||||||
|
|
@ -26,21 +26,15 @@ const getInitials = (name: string) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
type CardsData = {
|
type CardsData = {
|
||||||
editRecipient: any;
|
|
||||||
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
|
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
|
||||||
setEditCase: (string: any) => void;
|
setEditCase: (string: any) => void;
|
||||||
transactionTemplateToggle: string
|
transactionTemplateToggle: string
|
||||||
editRecipient: any
|
|
||||||
setEditRecipientCurrentEmail: any,
|
|
||||||
editRecipientCurrentEmail: string
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => {
|
||||||
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => {
|
|
||||||
const templateId = useParams<{ templateId: string }>().templateId;
|
const templateId = useParams<{ templateId: string }>().templateId;
|
||||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||||
|
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
if (!transactionId) {
|
if (!transactionId) {
|
||||||
|
|
@ -62,11 +56,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
||||||
// alert(JSON.stringify(recipient))
|
// alert(JSON.stringify(recipient))
|
||||||
setEditCase('Edit')
|
setEditCase('Edit')
|
||||||
setEditRecipient(recipient)
|
setEditRecipient(recipient)
|
||||||
if (recipient.uuid) {
|
|
||||||
setEditRecipientCurrentEmail(recipient.uuid)
|
|
||||||
}else{
|
|
||||||
setEditRecipientCurrentEmail(recipient.id)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemoveRecipient = (recipient) => {
|
const handleRemoveRecipient = (recipient) => {
|
||||||
|
|
@ -141,7 +130,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
||||||
{recipients.map((recipient, idx) => (
|
{recipients.map((recipient, idx) => (
|
||||||
<div
|
<div
|
||||||
key={recipient.email + idx}
|
key={recipient.email + idx}
|
||||||
className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-gray-200 opacity-40" : ""}`}
|
className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
{/* {signingOrder && ( */}
|
{/* {signingOrder && ( */}
|
||||||
|
|
@ -167,65 +156,65 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
||||||
}
|
}
|
||||||
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
|
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
|
||||||
/>}
|
/>}
|
||||||
|
{/* )} */}
|
||||||
|
|
||||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
|
||||||
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
|
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="font-semibold text-gray-800 truncate text-sm">
|
|
||||||
{recipient.firstName} {recipient.lastName || ""}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 truncate">
|
|
||||||
{recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{signType !== "self-sign" && (
|
<div className="min-w-0">
|
||||||
<div className="flex justify-between gap-2 items-center">
|
<p className="font-semibold text-gray-800 truncate text-sm">
|
||||||
{/* Edit Button */}
|
{recipient.firstName} {recipient.lastName || ""}
|
||||||
<button
|
</p>
|
||||||
type="button"
|
<p className="text-xs text-gray-500 truncate">
|
||||||
title="Edit recipient"
|
{recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""}
|
||||||
aria-label={`Edit recipient ${recipient.firstName}`}
|
</p>
|
||||||
onClick={() => handleEditRecipient(recipient)}
|
</div>
|
||||||
disabled={
|
|
||||||
// For templates: always enabled (never disabled)
|
|
||||||
['templates'].includes(transactionTemplateToggle)
|
|
||||||
? false
|
|
||||||
: // For transactions: disabled if not newOne AND not allowed to edit
|
|
||||||
(!recipient.newOne && !recipient.allowSenderToEdit)
|
|
||||||
}
|
|
||||||
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<FiEdit size={16} />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Delete Button */}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title="Remove recipient"
|
|
||||||
aria-label={`Remove recipient ${recipient.firstName}`}
|
|
||||||
onClick={() => handleRemoveRecipient(recipient)}
|
|
||||||
disabled={
|
|
||||||
// For templates: always enabled (never disabled)
|
|
||||||
['templates'].includes(transactionTemplateToggle)
|
|
||||||
? false
|
|
||||||
: // For transactions: disabled if not newOne AND not allowed to delete
|
|
||||||
(!recipient.newOne && !recipient.allowSenderToDelete)
|
|
||||||
}
|
|
||||||
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<ImBin size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
)}
|
{signType !== "self-sign" && (
|
||||||
|
<div className="flex justify-between gap-2 items-center">
|
||||||
|
{/* Edit Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title="Edit recipient"
|
||||||
|
aria-label={`Edit recipient ${recipient.firstName}`}
|
||||||
|
onClick={() => handleEditRecipient(recipient)}
|
||||||
|
disabled={
|
||||||
|
// For templates: always enabled (never disabled)
|
||||||
|
['templates'].includes(transactionTemplateToggle)
|
||||||
|
? false
|
||||||
|
: // For transactions: disabled if not newOne AND not allowed to edit
|
||||||
|
(!recipient.newOne && !recipient.allowSenderToEdit)
|
||||||
|
}
|
||||||
|
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<FiEdit size={16} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Delete Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title="Remove recipient"
|
||||||
|
aria-label={`Remove recipient ${recipient.firstName}`}
|
||||||
|
onClick={() => handleRemoveRecipient(recipient)}
|
||||||
|
disabled={
|
||||||
|
// For templates: always enabled (never disabled)
|
||||||
|
['templates'].includes(transactionTemplateToggle)
|
||||||
|
? false
|
||||||
|
: // For transactions: disabled if not newOne AND not allowed to delete
|
||||||
|
(!recipient.newOne && !recipient.allowSenderToDelete)
|
||||||
|
}
|
||||||
|
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<ImBin size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -77,35 +77,35 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
||||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
const fetchTags = async () => {
|
|
||||||
try {
|
|
||||||
const requests = selectedRecipients.map((recipient) =>
|
|
||||||
api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
|
|
||||||
);
|
|
||||||
const response = await Promise.all(requests);
|
|
||||||
let recTags = {}
|
|
||||||
for (const res of response) {
|
|
||||||
for (const tag of res.data) {
|
|
||||||
const key = `${tag.documentId}_${tag.pageIndex}`;
|
|
||||||
if (recTags[key]) {
|
|
||||||
recTags[key].push({ ...tag, update: false });
|
|
||||||
} else {
|
|
||||||
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// console.log(recTags, "Line 83");
|
|
||||||
setDroppedItems(recTags)
|
|
||||||
// Handle your response here
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// FETCHING TAG - START
|
// FETCHING TAG - START
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedRecipients.length === 0) return;
|
if (selectedRecipients.length === 0) return;
|
||||||
|
|
||||||
|
const fetchTags = async () => {
|
||||||
|
try {
|
||||||
|
const requests = selectedRecipients.map((recipient) =>
|
||||||
|
api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
|
||||||
|
);
|
||||||
|
const response = await Promise.all(requests);
|
||||||
|
let recTags = {}
|
||||||
|
for (const res of response) {
|
||||||
|
for (const tag of res.data) {
|
||||||
|
const key = `${tag.documentId}_${tag.pageIndex}`;
|
||||||
|
if (recTags[key]) {
|
||||||
|
recTags[key].push(tag);
|
||||||
|
} else {
|
||||||
|
recTags[key] = [tag]; // Initialize with an array
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log(recTags, "Line 83");
|
||||||
|
setDroppedItems(recTags)
|
||||||
|
// Handle your response here
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
fetchTags();
|
fetchTags();
|
||||||
}, [selectedRecipients]);
|
}, [selectedRecipients]);
|
||||||
|
|
||||||
|
|
@ -161,6 +161,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
||||||
delete updateTags[updateTags.length - 1].update
|
delete updateTags[updateTags.length - 1].update
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updatedData[recipientId] = updateTags
|
updatedData[recipientId] = updateTags
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -173,30 +174,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await Promise.all(requests);
|
const responses = await Promise.all(requests);
|
||||||
|
const droppedItemsUpdateFalse = Object.fromEntries(
|
||||||
|
Object.entries(droppedItems).map(([recipientId, tags]) => {
|
||||||
|
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
let recTags = droppedItems;
|
console.log(droppedItemsUpdateFalse, "Line 182")
|
||||||
|
|
||||||
for (const res of response) {
|
setDroppedItems(droppedItemsUpdateFalse);
|
||||||
for (const tag of res.data) {
|
|
||||||
const key = `${tag.documentId}_${tag.pageIndex}`;
|
|
||||||
if (recTags[key]) {
|
|
||||||
recTags[key].push({ ...tag, update: false });
|
|
||||||
} else {
|
|
||||||
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedTag(null);
|
|
||||||
|
|
||||||
// setTimeout(async () => {
|
|
||||||
// await fetchTags()
|
|
||||||
// setSelectedTag(null);
|
|
||||||
// }, 1000)
|
|
||||||
|
|
||||||
// console.log(droppedItemsUpdateFalse, "Line 182")
|
|
||||||
// setDroppedItems(droppedItemsUpdateFalse);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error submitting recipient tags:", error);
|
console.error("Error submitting recipient tags:", error);
|
||||||
}
|
}
|
||||||
|
|
@ -313,11 +300,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
||||||
|
|
||||||
await sendTagsToRecipients(tagsData, accountId, transactionId);
|
await sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||||
|
|
||||||
// if (save) {
|
|
||||||
// setSelectedTag(null);
|
|
||||||
// await fetchTags();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// SENDING Transaction - START
|
// SENDING Transaction - START
|
||||||
if (!save) {
|
if (!save) {
|
||||||
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||||
|
|
@ -381,6 +363,19 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
||||||
const key = `${docId}_${pageIndex}`;
|
const key = `${docId}_${pageIndex}`;
|
||||||
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
||||||
|
|
||||||
|
// Handling Initia Width and height of Some tags - START
|
||||||
|
if (dragElemData.label === TagsTypes.STAMP) {
|
||||||
|
dragElemData.width = 160
|
||||||
|
dragElemData.height = 160
|
||||||
|
} else if (dragElemData.label === TagsTypes.SIGNATURE) {
|
||||||
|
dragElemData.width = 200
|
||||||
|
dragElemData.height = 75
|
||||||
|
} else if (dragElemData.label === TagsTypes.INITIALS) {
|
||||||
|
dragElemData.width = 85
|
||||||
|
dragElemData.height = 75
|
||||||
|
}
|
||||||
|
// Handling Initia Width and height of Some tags - END
|
||||||
|
|
||||||
let prepData = {
|
let prepData = {
|
||||||
properties: data.properties,
|
properties: data.properties,
|
||||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import fields from '../../../helper/fieldsListData';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import typeToIconMap from '../../../helper/iconMap';
|
import typeToIconMap from '../../../helper/iconMap';
|
||||||
import { FaQuestionCircle } from 'react-icons/fa';
|
import { FaQuestionCircle } from 'react-icons/fa';
|
||||||
import { TagsProperties, TagsTypes } from '../../../utlity/types';
|
import { TagsProperties } from '../../../utlity/types';
|
||||||
import { v4 as uuidv4 } from "uuid";
|
import { v4 as uuidv4 } from "uuid";
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|
@ -13,25 +13,12 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
|
||||||
let width = dragElemRect.width
|
let width = dragElemRect.width
|
||||||
let height = dragElemRect.height
|
let height = dragElemRect.height
|
||||||
|
|
||||||
if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
|
if (label === "radio" || label === "checkbox") {
|
||||||
const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
|
const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
|
||||||
width = innerIconConRect.width + 10
|
width = innerIconConRect.width + 10
|
||||||
height = innerIconConRect.height + 10
|
height = innerIconConRect.height + 10
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handling Initia Width and height of Some tags - START
|
|
||||||
if (label === TagsTypes.STAMP) {
|
|
||||||
width = 160
|
|
||||||
height = 160
|
|
||||||
} else if (label === TagsTypes.SIGNATURE) {
|
|
||||||
width = 200
|
|
||||||
height = 75
|
|
||||||
} else if (label === TagsTypes.INITIALS) {
|
|
||||||
width = 85
|
|
||||||
height = 75
|
|
||||||
}
|
|
||||||
// Handling Initia Width and height of Some tags - END
|
|
||||||
|
|
||||||
const offsetX = event.clientX - dragElemRect.left;
|
const offsetX = event.clientX - dragElemRect.left;
|
||||||
const offsetY = event.clientY - dragElemRect.top;
|
const offsetY = event.clientY - dragElemRect.top;
|
||||||
|
|
||||||
|
|
@ -64,7 +51,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
|
||||||
|
|
||||||
let { accountId } = useParams<{ accountId: string }>();
|
let { accountId } = useParams<{ accountId: string }>();
|
||||||
|
|
||||||
if (acntId) {
|
if(acntId) {
|
||||||
accountId = acntId;
|
accountId = acntId;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
||||||
let transactionId = params.transactionId
|
let transactionId = params.transactionId
|
||||||
if (!transactionId) {
|
if (!transactionId) {
|
||||||
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||||
transactionId = params.templateId;
|
transactionId = params.templateId;
|
||||||
dispatch(toggleToTemplates());
|
dispatch(toggleToTemplates());
|
||||||
}
|
}
|
||||||
if (!accountId || !transactionId) {
|
if (!accountId || !transactionId) {
|
||||||
window.location.href = "/";
|
window.location.href = "/";
|
||||||
|
|
@ -80,13 +80,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
||||||
<div className='flex items-center gap-1.5'>
|
<div className='flex items-center gap-1.5'>
|
||||||
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
||||||
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
||||||
<p>
|
<p>{selectedRecipient.firstName} {selectedRecipient.lastName}</p>
|
||||||
{
|
|
||||||
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
|
|
||||||
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
|
||||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<MdKeyboardArrowDown />
|
<MdKeyboardArrowDown />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,13 +101,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
||||||
<div className='flex items-center gap-1.5'>
|
<div className='flex items-center gap-1.5'>
|
||||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||||
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
||||||
<p>
|
<p>{recipient.firstName} {recipient.lastName} </p>
|
||||||
{
|
|
||||||
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
|
|
||||||
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
|
|
||||||
`${recipient.firstName + " " + recipient.lastName}`
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
{selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
|
{selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
|
||||||
</div>)
|
</div>)
|
||||||
|
|
@ -124,8 +112,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
||||||
|
|
||||||
{/* Drag Drop Tags Start */}
|
{/* Drag Drop Tags Start */}
|
||||||
<div
|
<div
|
||||||
id='tags-con-dash-left'
|
id='tags-con-dash-left'
|
||||||
className='mt-4'>
|
className='mt-4'>
|
||||||
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
|
// const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
|
||||||
const [dotCount, setDotCount] = useState(0);
|
const [dotCount, setDotCount] = useState(0);
|
||||||
|
|
||||||
|
|
@ -126,11 +125,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||||
if (isSignSend) {
|
if (isSignSend) {
|
||||||
navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
|
navigate(`./../../../sign/${selfUserSign.recipientId}`);
|
||||||
}
|
|
||||||
else {
|
|
||||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
|
|
||||||
}
|
}
|
||||||
|
// else {
|
||||||
|
// navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||||
|
// }
|
||||||
} else {
|
} else {
|
||||||
navigate(`/templates`);
|
navigate(`/templates`);
|
||||||
toast.success("Template Saved...!", {
|
toast.success("Template Saved...!", {
|
||||||
|
|
@ -312,7 +311,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
||||||
return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
|
return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
|
||||||
<div className='flex items-center gap-1.5'>
|
<div className='flex items-center gap-1.5'>
|
||||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{recipient.firstName} {recipient.lastName}</p>
|
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{recipient.firstName} {recipient.lastName} segfsdtzgszrdtgrs serdgvsrdgs dtrgv</p>
|
||||||
</div>
|
</div>
|
||||||
</div>)
|
</div>)
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import { RootState } from '../../../store/store';
|
||||||
import Loader from '../../dashboard/Loader';
|
import Loader from '../../dashboard/Loader';
|
||||||
import { hideLoader } from '../../../store/slices/loaderSlice';
|
import { hideLoader } from '../../../store/slices/loaderSlice';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import api from '../../../config/api';
|
|
||||||
|
|
||||||
export interface IsSendInterface {
|
export interface IsSendInterface {
|
||||||
send: boolean | null;
|
send: boolean | null;
|
||||||
|
|
@ -26,7 +25,7 @@ const ProcessStepTwo = () => {
|
||||||
const [isSend, setIsSend] = useState<boolean | null>(null);
|
const [isSend, setIsSend] = useState<boolean | null>(null);
|
||||||
const globalLoader = useSelector((state: RootState) => state.loader)
|
const globalLoader = useSelector((state: RootState) => state.loader)
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
@ -35,8 +34,6 @@ const ProcessStepTwo = () => {
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
|
<div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
|
||||||
<NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
|
<NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
|
||||||
|
|
|
||||||
|
|
@ -53,13 +53,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
||||||
<div className='flex items-center gap-1.5'>
|
<div className='flex items-center gap-1.5'>
|
||||||
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
||||||
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
||||||
<p>
|
<p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
|
||||||
{
|
|
||||||
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
|
|
||||||
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
|
||||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<MdKeyboardArrowDown />
|
<MdKeyboardArrowDown />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,7 +65,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
||||||
key={indx}
|
key={indx}
|
||||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handlePropertyChange('recipientId', recipient.id);
|
handlePropertyChange('recipientId', recipient.id);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setDropDownToggle(false);
|
setDropDownToggle(false);
|
||||||
}, 0)
|
}, 0)
|
||||||
|
|
@ -80,13 +74,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
||||||
<div className='flex items-center gap-1.5'>
|
<div className='flex items-center gap-1.5'>
|
||||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||||
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
||||||
<p>
|
<p>{recipient.firstName} {recipient.lastName} </p>
|
||||||
{
|
|
||||||
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
|
|
||||||
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
|
|
||||||
`${recipient.firstName + " " + recipient.lastName}`
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
|
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
|
||||||
</div>)
|
</div>)
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ import { FaSpinner } from "react-icons/fa";
|
||||||
import { GrCheckboxSelected } from "react-icons/gr";
|
import { GrCheckboxSelected } from "react-icons/gr";
|
||||||
import { Bounce, toast } from "react-toastify";
|
import { Bounce, toast } from "react-toastify";
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { SaveType, SaveTypeEnum } from '../client/SignDocument';
|
import { SaveType } from '../client/SignDocument';
|
||||||
import { CiSaveDown1 } from 'react-icons/ci';
|
import { CiSaveDown1 } from 'react-icons/ci';
|
||||||
import api from '../../config/api';
|
import api from '../../config/api';
|
||||||
|
|
||||||
|
|
@ -160,21 +160,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||||
})
|
})
|
||||||
if (res?.data) {
|
if (res?.data) {
|
||||||
let preSavedSignatures = res?.data
|
let preSavedSignatures = res?.data
|
||||||
if (res.data.length) {
|
|
||||||
const defaultVal = res.data.filter((obj, indx) => "default" in obj && obj.default);
|
|
||||||
const { initialsBlob, signatureBlob } = defaultVal[0];
|
|
||||||
|
|
||||||
if (initialsBlob && signatureBlob) {
|
|
||||||
setSaved({
|
|
||||||
signatureId: res.data.id,
|
|
||||||
saveType: SaveTypeEnum.DRAW,
|
|
||||||
save: true,
|
|
||||||
signature: signatureBlob,
|
|
||||||
initial: initialsBlob,
|
|
||||||
});
|
|
||||||
console.log("saved Called Line 174")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setPreSaveSignatures(preSavedSignatures)
|
setPreSaveSignatures(preSavedSignatures)
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
|
@ -294,7 +279,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||||
initials: "",
|
initials: "",
|
||||||
})
|
})
|
||||||
setSaved({
|
setSaved({
|
||||||
signatureId: res.data.id ?? null,
|
|
||||||
saveType: res.data.signatureType ?? null,
|
saveType: res.data.signatureType ?? null,
|
||||||
save: true,
|
save: true,
|
||||||
signature: res.data.signatureBlob ?? null,
|
signature: res.data.signatureBlob ?? null,
|
||||||
|
|
@ -649,7 +633,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
|
CREATE SIGNATURE
|
||||||
{/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
|
{/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -90,22 +90,6 @@ const Templates = () => {
|
||||||
navigate(`/process-step-one/${accountId}/template/${templateId}`);
|
navigate(`/process-step-one/${accountId}/template/${templateId}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTimestamp(isoString, options = { timeZone: 'local' }) {
|
|
||||||
// Parse the ISO string to a Date object
|
|
||||||
const date = new Date(isoString);
|
|
||||||
|
|
||||||
if (isNaN(date)) {
|
|
||||||
return 'Invalid date';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return formatted date string
|
|
||||||
if (options.timeZone === 'UTC') {
|
|
||||||
return date.toUTCString(); // e.g. "Mon, 04 Aug 2025 13:46:46 GMT"
|
|
||||||
} else {
|
|
||||||
return date.toLocaleString(); // e.g. "8/4/2025, 9:46:46 AM" (based on local time zone)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-3 text-sm">
|
<div className="p-3 text-sm">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
|
|
@ -175,8 +159,8 @@ const Templates = () => {
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-2 text-sm text-center">{item.name || 'Untitled'}</td>
|
<td className="px-4 py-2 text-sm text-center">{item.name || 'Untitled'}</td>
|
||||||
<td className="px-4 py-2 text-sm text-center">{formatTimestamp(item.createdAt)}</td>
|
<td className="px-4 py-2 text-sm text-center">{formatDate(item.createdAt)}</td>
|
||||||
<td className="px-4 py-2 text-sm text-center">{formatTimestamp(item.lastModifiedAt)}</td>
|
<td className="px-4 py-2 text-sm text-center">{formatDate(item.lastModifiedAt)}</td>
|
||||||
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">Use</span></td>
|
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">Use</span></td>
|
||||||
{/* Dropdown Trigger + Tooltip */}
|
{/* Dropdown Trigger + Tooltip */}
|
||||||
<td className="px-4 py-2 text-center relative">
|
<td className="px-4 py-2 text-center relative">
|
||||||
|
|
@ -189,7 +173,7 @@ const Templates = () => {
|
||||||
|
|
||||||
{showMenu === index && (
|
{showMenu === index && (
|
||||||
<div
|
<div
|
||||||
className="absolute right-21 top-0 mt-2 w-20 bg-white border border-gray-200 rounded shadow-lg z-10 transition-opacity duration-300 ease-in-out"
|
className="absolute right-15 top-5 mt-2 w-32 bg-white border border-gray-200 rounded shadow-lg z-10 transition-opacity duration-300 ease-in-out"
|
||||||
tabIndex={0} // Make it focusable
|
tabIndex={0} // Make it focusable
|
||||||
onBlur={(e) => {
|
onBlur={(e) => {
|
||||||
// Ensure it only closes if focus truly leaves the container
|
// Ensure it only closes if focus truly leaves the container
|
||||||
|
|
@ -199,7 +183,7 @@ const Templates = () => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="block w-full text-left px-4 py-1 text-sm text-gray-700 hover:bg-gray-100"
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
onClick={() => handleEditClick(item.id)}
|
onClick={() => handleEditClick(item.id)}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import { IoCloseOutline } from 'react-icons/io5';
|
||||||
import { MdEditDocument } from "react-icons/md";
|
import { MdEditDocument } from "react-icons/md";
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { RootState } from '../../store/store';
|
import { RootState } from '../../store/store';
|
||||||
import { SignTypeEnum } from '../../utlity/types';
|
|
||||||
|
|
||||||
// Sample recipient data — you can replace this with actual API data later
|
// Sample recipient data — you can replace this with actual API data later
|
||||||
const recipients = [
|
const recipients = [
|
||||||
|
|
@ -63,7 +62,7 @@ const TransactionView = () => {
|
||||||
|
|
||||||
|
|
||||||
const handleNavigateToSign = (id: number) => {
|
const handleNavigateToSign = (id: number) => {
|
||||||
window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
|
window.open(`./../../../../sign/${id}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -139,7 +138,7 @@ const TransactionView = () => {
|
||||||
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
|
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
|
||||||
<p
|
<p
|
||||||
onClick={() => handleNavigateToSign(recipient.id)}
|
onClick={() => handleNavigateToSign(recipient.id)}
|
||||||
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
|
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'>
|
||||||
Sign
|
Sign
|
||||||
</p>}
|
</p>}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue