Compare commits
3 Commits
425ecb2ecb
...
4de7c2540e
| Author | SHA1 | Date |
|---|---|---|
=bhagwanSingh
|
4de7c2540e | |
|
=bhagwanSingh
|
3e0ce80278 | |
|
=bhagwanSingh
|
444de539f4 |
|
|
@ -301,7 +301,7 @@ const SignCompletionScreen: React.FC = () => {
|
|||
>
|
||||
{/* <a> */}
|
||||
<IoMdArrowRoundBack className="w-5 h-5 mr-3" />
|
||||
Back Sign Made Easy
|
||||
Back to Sign Made Easy
|
||||
{/* </a> */}
|
||||
</a> :
|
||||
<a
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -50,7 +50,7 @@ const StartNow = () => {
|
|||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
id='start-now-upload-con'
|
||||
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">
|
||||
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">
|
||||
{/* Upload icon with subtle animation */}
|
||||
<div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
|
||||
<FiUpload className="text-lg" />
|
||||
|
|
|
|||
|
|
@ -28,16 +28,17 @@ const cards = [
|
|||
// buttonText: 'Start Now',
|
||||
// bg: 'bg-white/60',
|
||||
// },
|
||||
{
|
||||
icon: <FiEdit className="w-5 h-5 text-green-700" />,
|
||||
title: 'Sign an Agreement',
|
||||
description: 'Upload a document you need to sign and place your signature.',
|
||||
bg: 'bg-white/60',
|
||||
},
|
||||
// {
|
||||
// icon: <FiEdit className="w-5 h-5 text-green-700" />,
|
||||
// title: 'Sign an Agreement',
|
||||
// description: 'Upload a document you need to sign and place your signature.',
|
||||
// bg: 'bg-white/60',
|
||||
// },
|
||||
{
|
||||
icon: <FiFolder className="w-5 h-5 text-purple-700" />,
|
||||
title: 'Use a Template',
|
||||
description: 'Pick from ready-made templates for common agreements.',
|
||||
link: "/templates",
|
||||
bg: 'bg-white/60',
|
||||
},
|
||||
];
|
||||
|
|
@ -54,19 +55,19 @@ const StartSection = () => {
|
|||
|
||||
const defaultAccountId = user.account.id;
|
||||
|
||||
const handleStartSectionClick = (card: StartCard) => {
|
||||
if ("buttonText" in card && card.buttonText === "Start Now") {
|
||||
api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
||||
.then(res => {
|
||||
if (res.status === 200 || res.status === 201) {
|
||||
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
||||
dispatch(setTransactionId(res.data));
|
||||
setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
|
||||
}
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
}
|
||||
// navigate("/process-step-one");
|
||||
const handleStartSectionClick = (link: string) => {
|
||||
// if ("buttonText" in card && card.buttonText === "Start Now") {
|
||||
// api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
||||
// .then(res => {
|
||||
// if (res.status === 200 || res.status === 201) {
|
||||
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
||||
// dispatch(setTransactionId(res.data));
|
||||
// setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
|
||||
// }
|
||||
// })
|
||||
// .catch(err => console.log(err))
|
||||
// }
|
||||
navigate(link);
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
|
|
@ -87,10 +88,10 @@ const StartSection = () => {
|
|||
|
||||
<StartNow />
|
||||
|
||||
<div className='col-span-2 grid grid-cols-2 justify-between gap-4'>
|
||||
<div className='col-span-1 grid grid-cols-1 justify-between gap-4'>
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
onClick={() => handleStartSectionClick(card)}
|
||||
onClick={() => handleStartSectionClick(card.link)}
|
||||
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`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -285,8 +285,8 @@ const DocumentCompletionScreen = () => {
|
|||
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>
|
||||
{/* <FaPen className=" text-white text-md" /> */}
|
||||
<span className="tracking-wide text-white">View Transaction</span>
|
||||
</Link>
|
||||
|
||||
{/* <button
|
||||
|
|
|
|||
|
|
@ -95,6 +95,15 @@ const ProcessStepOne = () => {
|
|||
try {
|
||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
|
||||
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)
|
||||
} catch (e) {
|
||||
console.log("Error - transactions details")
|
||||
|
|
@ -265,7 +274,7 @@ const ProcessStepOne = () => {
|
|||
}
|
||||
|
||||
} else {
|
||||
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
}
|
||||
dispatch(showLoader("Processing Message..."));
|
||||
|
||||
|
|
@ -425,7 +434,7 @@ const ProcessStepOne = () => {
|
|||
{
|
||||
(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
|
||||
<div className="flex flex-col gap-4 align-start">
|
||||
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
|
||||
<RecipientCards editRecipient={editRecipient} transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
|
||||
{/* {signType !== "self-sign" && <RecipientAddCard />} */}
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -26,12 +26,13 @@ const getInitials = (name: string) => {
|
|||
};
|
||||
|
||||
type CardsData = {
|
||||
editRecipient: any;
|
||||
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
|
||||
setEditCase: (string: any) => void;
|
||||
transactionTemplateToggle: string
|
||||
};
|
||||
|
||||
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => {
|
||||
const RecipientCards = ({ editRecipient, setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
|
|
@ -127,94 +128,98 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
)}
|
||||
|
||||
<div className="flex flex-col divide-y divide-gray-200">
|
||||
{recipients.map((recipient, idx) => (
|
||||
<div
|
||||
key={recipient.email + idx}
|
||||
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">
|
||||
{/* {signingOrder && ( */}
|
||||
{recipients.length > 1 ? <div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={recipient.routingOrder || 1}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
}
|
||||
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
|
||||
/>
|
||||
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
|
||||
</div>
|
||||
: <input
|
||||
type="number"
|
||||
disabled
|
||||
value={recipient.routingOrder || 1}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
}
|
||||
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
|
||||
/>}
|
||||
{/* )} */}
|
||||
{recipients.map((recipient, idx) => {
|
||||
// if(recipient.id === editRecipient.id) return
|
||||
|
||||
<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 || ""}`)}
|
||||
return (
|
||||
<div
|
||||
key={recipient.email + idx}
|
||||
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">
|
||||
{/* {signingOrder && ( */}
|
||||
{recipients.length > 1 ? <div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={recipient.routingOrder || 1}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
}
|
||||
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
|
||||
/>
|
||||
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
|
||||
</div>
|
||||
: <input
|
||||
type="number"
|
||||
disabled
|
||||
value={recipient.routingOrder || 1}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
}
|
||||
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">
|
||||
{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 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>
|
||||
{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>
|
||||
|
||||
{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>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -77,35 +77,35 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
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
|
||||
useEffect(() => {
|
||||
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();
|
||||
}, [selectedRecipients]);
|
||||
|
||||
|
|
@ -161,7 +161,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
delete updateTags[updateTags.length - 1].update
|
||||
}
|
||||
}
|
||||
|
||||
updatedData[recipientId] = updateTags
|
||||
}
|
||||
|
||||
|
|
@ -174,16 +173,30 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
});
|
||||
|
||||
try {
|
||||
const responses = await Promise.all(requests);
|
||||
const droppedItemsUpdateFalse = Object.fromEntries(
|
||||
Object.entries(droppedItems).map(([recipientId, tags]) => {
|
||||
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
|
||||
})
|
||||
)
|
||||
const response = await Promise.all(requests);
|
||||
|
||||
console.log(droppedItemsUpdateFalse, "Line 182")
|
||||
let recTags = droppedItems;
|
||||
|
||||
setDroppedItems(droppedItemsUpdateFalse);
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedTag(null);
|
||||
|
||||
// setTimeout(async () => {
|
||||
// await fetchTags()
|
||||
// setSelectedTag(null);
|
||||
// }, 1000)
|
||||
|
||||
// console.log(droppedItemsUpdateFalse, "Line 182")
|
||||
// setDroppedItems(droppedItemsUpdateFalse);
|
||||
} catch (error) {
|
||||
console.error("Error submitting recipient tags:", error);
|
||||
}
|
||||
|
|
@ -300,6 +313,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
await sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||
|
||||
// if (save) {
|
||||
// setSelectedTag(null);
|
||||
// await fetchTags();
|
||||
// }
|
||||
|
||||
// SENDING Transaction - START
|
||||
if (!save) {
|
||||
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
|
|
@ -363,19 +381,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
const key = `${docId}_${pageIndex}`;
|
||||
// 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 = {
|
||||
properties: data.properties,
|
||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import fields from '../../../helper/fieldsListData';
|
|||
import { useParams } from 'react-router-dom';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import { TagsProperties } from '../../../utlity/types';
|
||||
import { TagsProperties, TagsTypes } from '../../../utlity/types';
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import axios from 'axios';
|
||||
|
||||
|
|
@ -13,12 +13,25 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
|
|||
let width = dragElemRect.width
|
||||
let height = dragElemRect.height
|
||||
|
||||
if (label === "radio" || label === "checkbox") {
|
||||
if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
|
||||
const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
|
||||
width = innerIconConRect.width + 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 offsetY = event.clientY - dragElemRect.top;
|
||||
|
||||
|
|
@ -46,12 +59,12 @@ interface FieldListProps {
|
|||
}
|
||||
|
||||
const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {
|
||||
|
||||
|
||||
const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
|
||||
|
||||
let { accountId } = useParams<{ accountId: string }>();
|
||||
|
||||
if(acntId) {
|
||||
if (acntId) {
|
||||
accountId = acntId;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
let transactionId = params.transactionId
|
||||
if (!transactionId) {
|
||||
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||
transactionId = params.templateId;
|
||||
dispatch(toggleToTemplates());
|
||||
transactionId = params.templateId;
|
||||
dispatch(toggleToTemplates());
|
||||
}
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
|
|
@ -80,7 +80,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
<div className='flex items-center gap-1.5'>
|
||||
<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 }} /> */}
|
||||
<p>{selectedRecipient.firstName} {selectedRecipient.lastName}</p>
|
||||
<p>
|
||||
{
|
||||
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
|
||||
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
|
@ -101,7 +107,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
<div className='flex items-center gap-1.5'>
|
||||
<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 }} /> */}
|
||||
<p>{recipient.firstName} {recipient.lastName} </p>
|
||||
<p>
|
||||
{
|
||||
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
|
||||
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
|
||||
`${recipient.firstName + " " + recipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
{selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
|
||||
</div>)
|
||||
|
|
@ -111,9 +123,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
{/* Side Bar showing Recipients - ENDS*/}
|
||||
|
||||
{/* Drag Drop Tags Start */}
|
||||
<div
|
||||
id='tags-con-dash-left'
|
||||
className='mt-4'>
|
||||
<div
|
||||
id='tags-con-dash-left'
|
||||
className='mt-4'>
|
||||
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -125,11 +125,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
setTimeout(() => {
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
if (isSignSend) {
|
||||
navigate(`./../../../sign/${selfUserSign.recipientId}`);
|
||||
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
|
||||
}
|
||||
else {
|
||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||
}
|
||||
// else {
|
||||
// navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||
// }
|
||||
} else {
|
||||
navigate(`/templates`);
|
||||
toast.success("Template Saved...!", {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
|||
<div className='flex items-center gap-1.5'>
|
||||
<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 }} /> */}
|
||||
<p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
|
||||
<p>
|
||||
{
|
||||
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
|
||||
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
|
@ -65,7 +71,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
|||
key={indx}
|
||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
||||
onClick={() => {
|
||||
handlePropertyChange('recipientId', recipient.id);
|
||||
handlePropertyChange('recipientId', recipient.id);
|
||||
setTimeout(() => {
|
||||
setDropDownToggle(false);
|
||||
}, 0)
|
||||
|
|
@ -74,7 +80,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
|||
<div className='flex items-center gap-1.5'>
|
||||
<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 }} /> */}
|
||||
<p>{recipient.firstName} {recipient.lastName} </p>
|
||||
<p>
|
||||
{
|
||||
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
|
||||
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
|
||||
`${recipient.firstName + " " + recipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
|
||||
</div>)
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import { FaSpinner } from "react-icons/fa";
|
|||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import axios from 'axios';
|
||||
import { SaveType } from '../client/SignDocument';
|
||||
import { SaveType, SaveTypeEnum } from '../client/SignDocument';
|
||||
import { CiSaveDown1 } from 'react-icons/ci';
|
||||
import api from '../../config/api';
|
||||
|
||||
|
|
@ -160,6 +160,21 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
})
|
||||
if (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)
|
||||
}
|
||||
})()
|
||||
|
|
@ -279,6 +294,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
initials: "",
|
||||
})
|
||||
setSaved({
|
||||
signatureId: res.data.id ?? null,
|
||||
saveType: res.data.signatureType ?? null,
|
||||
save: true,
|
||||
signature: res.data.signatureBlob ?? null,
|
||||
|
|
@ -633,7 +649,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
CREATE SIGNATURE
|
||||
{activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
|
||||
{/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { IoCloseOutline } from 'react-icons/io5';
|
|||
import { MdEditDocument } from "react-icons/md";
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '../../store/store';
|
||||
import { SignTypeEnum } from '../../utlity/types';
|
||||
|
||||
// Sample recipient data — you can replace this with actual API data later
|
||||
const recipients = [
|
||||
|
|
@ -62,7 +63,7 @@ const TransactionView = () => {
|
|||
|
||||
|
||||
const handleNavigateToSign = (id: number) => {
|
||||
window.open(`./../../../../sign/${id}`)
|
||||
window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -138,7 +139,7 @@ const TransactionView = () => {
|
|||
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
|
||||
<p
|
||||
onClick={() => handleNavigateToSign(recipient.id)}
|
||||
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'>
|
||||
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
|
||||
Sign
|
||||
</p>}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue