From 5c12a25d5182ec633ae4c710a39ff0599803a1f6 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Wed, 15 Oct 2025 11:46:00 +0530 Subject: [PATCH] check --- src/components/client/SignDocument.tsx | 14 +- src/components/client/TagsCon.tsx | 41 +- .../processStepTwo/DocumentContainer.tsx | 41 +- .../processStepTwo/DroppedItemsTagsCon.tsx | 74 ++-- .../process/processStepTwo/LeftSideBar.tsx | 418 ++++++++++-------- .../process/processStepTwo/NavTwo.tsx | 30 +- .../process/processStepTwo/ProcessStepTwo.tsx | 4 +- .../transactions/TransactionView.tsx | 4 +- 8 files changed, 376 insertions(+), 250 deletions(-) diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 056e112..d014659 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import axios from "axios" import { RootState } from "../../store/store"; @@ -154,6 +154,8 @@ const SignDocument = () => { const { recipientId } = useParams(); const dispatch = useDispatch(); + const imageRefs = useRef<{ [key: string]: HTMLImageElement | null }>({}); + // Signer data - START const [selectedDocuments, setSelectedDocuments] = useState(null); const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null); @@ -1065,7 +1067,10 @@ const SignDocument = () => { (imageRefs.current[page.index] = el)} draggable="false" // onLoad={(imgElem) => { // setPageScales((prev) => ({ @@ -1084,6 +1089,9 @@ const SignDocument = () => { {!hideTags && <> { {!transparentTags && recipient?.type != "CC" && <> -
+

By Signing I agree Sign Made Easy Terms & Conditions.

{/*
= ({ pageWidth, + pageHeight, + renderedWidth, + renderedHeight, currDocTags, pageIdkey, provideTags, @@ -309,7 +315,9 @@ const TagsCon: React.FC = ({ <> {currDocTags.map((item, index) => { if ((item.pageIndex != pageIndex) || (item.documentId != documentId)) return <>; - console.log('pageWidth:', pageWidth, 'computed left:', (item.dimensions.left / pageWidth) * 100); + const scaleX = renderedWidth / Math.round(pageWidth); + const scaleY = renderedHeight / Math.round(pageHeight); + return (
= ({ // onPointerDown={(e) => handleTagMouseDown(e, key, index)} className="absolute rounded dropped-item text-sm" // onClick={() => handleTagClick(key, index)} - // style={{ - // left: `${item.dimensions.left}px`, - // top: `${item.dimensions.top}px`, - // width: `${item.dimensions.width}px`, - // height: `${item.dimensions.height}px`, - // border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) ? '2px dashed #1c398e' : 'none'}`, - // // display: `${hideTags ? 'none' : 'block'}` - // }} - style={{ - left: `${((item.dimensions.left / pageWidth) * 100)}%`, - top: item.dimensions.top, - width: `${((item.dimensions.width / pageWidth) * 100)}%`, - height: item.dimensions.height, + left: `${item.dimensions.left * scaleX}px`, + top: `${item.dimensions.top * scaleY}px`, + width: `${item.dimensions.width * scaleX}px`, + height: `${item.dimensions.height * scaleY}px`, + border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) ? '2px dashed #1c398e' : 'none'}`, + // display: `${hideTags ? 'none' : 'block'}` }} + // style={{ + // left: `${item.dimensions.left}px`, + // top: `${item.dimensions.top}px`, + // width: item.type == "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`, + // height: item.type == "radio" ? `max-content` : `${item.dimensions.height}px` + // }} + // style={{ + // left: `${((item.dimensions.left / pageWidth) * 100)}%`, + // top: item.dimensions.top, + // width: `${((item.dimensions.width / pageWidth) * 100)}%`, + // height: item.dimensions.height, + // }} > {item.required &&
void; + handleTransactionProcess: (isSave?: boolean, isNavigate?: boolean, navigateTo?: string) => void; } @@ -84,6 +84,8 @@ const DocumentContainer = forwardRef(null); const tagUndoRef = useRef([]); + const imageRefs = useRef<{ [key: string]: HTMLImageElement | null }>({}); + const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients); // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments) const selectedDocuments = useSelector((state: RootState) => state.documents.documents) @@ -233,12 +235,15 @@ const DocumentContainer = forwardRef { + const handleTransactionProcess = async (save: boolean = false, isNavigate: boolean = false, navigateTo: string = "/") => { - if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true; + // if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true; dispatch(showLoader("Saving Tags ...")) - if (Object.keys(droppedItems).length == 0) return; + if (Object.keys(droppedItems).length == 0) { + if (isNavigate) navigate(navigateTo); + dispatch(hideLoader()); + }; // if (!save) return; let updatedTags: any = []; @@ -260,10 +265,12 @@ const DocumentContainer = forwardRef (imageRefs.current[page.index] = el)} draggable="false" width={page.width} height={page.height} @@ -561,6 +580,8 @@ const DocumentContainer = forwardRef { // Get new X and Y positions relative to the container - let left = event.clientX - containerRect.left - offsetX; - let top = event.clientY - containerRect.top - offsetY; + let clientX = event.clientX + let clientY = event.clientY + + if ((event as any).changedTouches?.[0]) { + clientX = (event as any).changedTouches[0].pageX; + clientY = (event as any).changedTouches[0].pageY; + } + + let left = clientX - containerRect.left - offsetX; + let top = clientY - containerRect.top - offsetY; // Restrict movement within container bounds left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width)); @@ -205,6 +224,10 @@ const DroppedItemsTagsCon = forwardRef(({ targetElement!.style.top = `${top}px`; targetElement!.style.left = `${left}px`; + + + console.log(top, left, "top, left Line 283") + // Apply the movement to the element first // setDroppedItems(prevState => ({ // ...prevState, @@ -248,6 +271,8 @@ const DroppedItemsTagsCon = forwardRef(({ } const { left, top } = positionRef.current; + console.log(top, left, "HandleTag Mouse Up top, left Line 283") + setDroppedItems(prevState => ({ ...prevState, [key]: Array.isArray(prevState[key]) @@ -292,10 +317,6 @@ const DroppedItemsTagsCon = forwardRef(({ const dropZone: DOMRect = targetContainer?.getBoundingClientRect() as DOMRect; const droppedElemRect: DOMRect = targetElement?.getBoundingClientRect() as DOMRect; - - - - console.log(dropZone, "dropZone Line 309") console.log(droppedElemRect, "rect Line 309") @@ -565,6 +586,10 @@ const DroppedItemsTagsCon = forwardRef(({ const type = item.type.toUpperCase(); const IconComponent = typeToIconMap[type] || ; const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id == item.recipientId); + + const scaleX = renderedWidth / Math.round(pageWidth); + const scaleY = renderedHeight / Math.round(pageHeight); + return (
handleTagClick(pageIdkey, index)} - // style={{ - // left: `${item.dimensions.left}px`, - // top: `${item.dimensions.top}px`, - // width: item.type == "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`, - // height: item.type == "radio" ? `max-content` : `${item.dimensions.height}px` - // }} - style={{ - // left: `${((item.dimensions.left / pageWidth) * 100)}%`, - // top: `${((item.dimensions.top / pageHeight) * 100)}%`, - // width: `${(item.dimensions.width / pageWidth) * 100}%`, - // height: `${(item.dimensions.height / pageHeight) * 100}%`, - left: `${((item.dimensions.left / pageWidth) * 100)}%`, - top: `${((item.dimensions.top / pageHeight) * 100)}%`, - width: `${(item.dimensions.width / pageWidth) * 100}%`, - height: `${(item.dimensions.height / pageHeight) * 100}%`, + left: `${item.dimensions.left * scaleX}px`, + top: `${item.dimensions.top * scaleY}px`, + width: item.type == "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width * scaleX}px`, + height: item.type == "radio" ? `max-content` : `${item.dimensions.height * scaleY}px` }} - > + // style={{ + // // left: `${((item.dimensions.left / pageWidth) * 100)}%`, + // // top: `${((item.dimensions.top / pageHeight) * 100)}%`, + // // width: `${(item.dimensions.width / pageWidth) * 100}%`, + // // height: `${(item.dimensions.height / pageHeight) * 100}%`, + // left: `${((item.dimensions.left / pageWidth) * 100)}%`, + // top: `${((item.dimensions.top / pageHeight) * 100)}%`, + // width: `${(item.dimensions.width / pageWidth) * 100}%`, + // height: `${(item.dimensions.height / pageHeight) * 100}%`, + // }} + > {/* If Selected Tag Recipient Info- START */} {selectedTag?.key && selectedTag.key == pageIdkey && selectedTag.index == index && diff --git a/src/components/process/processStepTwo/LeftSideBar.tsx b/src/components/process/processStepTwo/LeftSideBar.tsx index d560a5e..57d443f 100644 --- a/src/components/process/processStepTwo/LeftSideBar.tsx +++ b/src/components/process/processStepTwo/LeftSideBar.tsx @@ -90,204 +90,246 @@ const LeftSideBar: React.FC = ({ isFields, isPages, selectedRe return ( <> {/* Left Side Bar - START */} - { - (isPages || isFields) &&
-
+ + { + (isPages || isFields) &&
+
{ + handleSetIsPages(false) + handleSetIsFields(false) + }} + className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'> + +
+ +
+
handleSetIsFields(!isFields)} + className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}> + +

Tags

+
+ +
handleSetIsPages(!isPages)} + className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}> + +

Pages

+
+
+ + + {selectedRecipients.length > 0 && isFields && <> + {/* Fields List and Recipeint - Start */} + {/* Side Bar showing Recipients */} +
+ +
setDropDownToggle(false)}> + {/* Selected Recipient */} +
setDropDownToggle(!dropDownToggle)} + className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'> +
+

+ {/* */} +

+ { + selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ? + (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) : + `${selectedRecipient.firstName + " " + selectedRecipient.lastName}` + } +

+
+ +
+ +
+ {selectedRecipients.length && selectedRecipients.map((recipient, indx) => { + if (recipient.type == recipientType.CC) return null; // Skip CC recipients + return (
{ + setSelectedRecipient(indx); + setTimeout(() => { + setDropDownToggle(false); + }, 0) + }} + > +
+

+ {/* */} +

+ { + recipient.firstName.length == 0 && recipient.lastName.length == 0 ? + (recipient.email.length == 0 ? recipient.roleName : recipient.email) : + `${recipient.firstName + " " + recipient.lastName}` + } +

+
+ {selectedRecipientIndx == indx && } +
) + })} +
+
+ {/* Side Bar showing Recipients - ENDS*/} + + {/* Drag Drop Tags Start */} +
+ +
+ +
+ + + {/* Fields List and Recipeint - End */} + } + + {isPages && <> + {/* Pages - START */} +
+ {selectedDocuments.length && selectedDocuments.map((document, indx) => { + return ( +
setDropDownTogglePage('')} + > +
setDropDownTogglePage(`${(dropDownTogglePage == 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)} + className={`p-2 ${(dropDownTogglePage == 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}> + { + document.pages != undefined && + } + +
+

{document.name}

+ +
+
+ + + { + dropDownTogglePage == 'pageDropDown' + indx && +
+ {/* Prev Button */} + { + if (currentPage == 0) e.preventDefault(); + else setCurrentPage(currentPage - 1); + }} + > + + + + {/* Page Selector */} + + + + / {document.pages?.length} + + + {/* Next Button */} + { + if (currentPage == document.pages?.length - 1) e.preventDefault(); + else setCurrentPage(currentPage + 1); + }} + > + + +
+ } + + +
+ ) + })} +
+ {/* Pages - END */} + } +
+ } + {/* Left Side Bar - END */} + + {/* Small Devices - START */} +
+ + {/* Left Side Pages */} + {!isPages &&
{ - handleSetIsPages(false) + handleSetIsPages(true) handleSetIsFields(false) }} - className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'> - -
- -
-
handleSetIsFields(!isFields)} - className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}> - -

Tags

+ className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-50 hover:opacity-100 transition-all duration-300'> +
+ +

+ P + A + G + E + S +

+
} -
handleSetIsPages(!isPages)} - className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}> - -

Pages

+ + {!isFields &&
{ + handleSetIsPages(false) + handleSetIsFields(true) + }} + > +
+ +

+ T + A + G + S +

-
+
} - {selectedRecipients.length > 0 && isFields && <> - {/* Fields List and Recipeint - Start */} - {/* Side Bar showing Recipients */} -
- -
setDropDownToggle(false)}> - {/* Selected Recipient */} -
setDropDownToggle(!dropDownToggle)} - className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'> -
-

- {/* */} -

- { - selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ? - (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) : - `${selectedRecipient.firstName + " " + selectedRecipient.lastName}` - } -

-
- -
- -
- {selectedRecipients.length && selectedRecipients.map((recipient, indx) => { - if (recipient.type == recipientType.CC) return null; // Skip CC recipients - return (
{ - setSelectedRecipient(indx); - setTimeout(() => { - setDropDownToggle(false); - }, 0) - }} - > -
-

- {/* */} -

- { - recipient.firstName.length == 0 && recipient.lastName.length == 0 ? - (recipient.email.length == 0 ? recipient.roleName : recipient.email) : - `${recipient.firstName + " " + recipient.lastName}` - } -

-
- {selectedRecipientIndx == indx && } -
) - })} -
-
- {/* Side Bar showing Recipients - ENDS*/} - - {/* Drag Drop Tags Start */} -
- -
- -
- - - {/* Fields List and Recipeint - End */} - } - - {isPages && <> - {/* Pages - START */} -
- {selectedDocuments.length && selectedDocuments.map((document, indx) => { - return ( -
setDropDownTogglePage('')} - > -
setDropDownTogglePage(`${(dropDownTogglePage == 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)} - className={`p-2 ${(dropDownTogglePage == 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}> - { - document.pages != undefined && - } - -
-

{document.name}

- -
-
- - - { - dropDownTogglePage == 'pageDropDown' + indx && -
- {/* Prev Button */} - { - if (currentPage == 0) e.preventDefault(); - else setCurrentPage(currentPage - 1); - }} - > - - - - {/* Page Selector */} - - - - / {document.pages?.length} - - - {/* Next Button */} - { - if (currentPage == document.pages?.length - 1) e.preventDefault(); - else setCurrentPage(currentPage + 1); - }} - > - - -
- } - - -
- ) - })} -
- {/* Pages - END */} - }
- } - {/* Left Side Bar - END */} - {/* Small Devices - START */} - - - - - {/* Small Devices - END */} + {/* Small Devices - END */} +
) diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index ebbc600..8057faa 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -28,7 +28,7 @@ interface NavTwoProps { isPreview?: boolean aId?: string | null tId?: string | null - onSendClick?: () => void; + onSendClick?: (isSave?: boolean, navigate?: boolean, navigateTo?: string) => void; } @@ -171,6 +171,7 @@ const NavTwo: React.FC = ({ function handleSend(isSignSend: boolean = false) { // dispatch(showLoader("Loading ...")); + if (onSendClick === undefined) return; const transactionSendValidationObj = transactionSendValidation() if (transactionSendValidationObj.oneSignerIsRequiredError) { @@ -185,13 +186,14 @@ const NavTwo: React.FC = ({ // setTimeout(() => { if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (isSignSend) { + // SELF SIGN CHECK HERE window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); } else { - onSendClick(); + onSendClick(false); // false for not a save action } } else { - onSendClick(); + onSendClick(true, true, "/templates"); // true for save action } // }, 1000) } @@ -290,7 +292,7 @@ const NavTwo: React.FC = ({ {/* Trigger */} @@ -303,12 +305,28 @@ const NavTwo: React.FC = ({ {/* */} + + {/* */} - + */} {transactionDetails.transaction.status == "CREATED" && Edit