From 6986947cbaf9e10a91600febada5386f5f4fa2a3 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Tue, 12 Aug 2025 16:20:16 +0530 Subject: [PATCH] Remove Auto Save, Change in atrributes Tags, MultiSign Change --- src/components/client/SignDocument.tsx | 200 +++++++-- src/components/home/StartSection.tsx | 6 +- .../processStepTwo/DocumentContainer.tsx | 408 +++++++++--------- .../process/processStepTwo/FieldList.tsx | 1 + .../process/processStepTwo/NavTwo.tsx | 6 +- .../rightSideBar/DirectionalControls.tsx | 17 +- .../rightSideBar/RightSideBar.tsx | 299 +++++++++---- src/utlity/types.tsx | 60 ++- 8 files changed, 667 insertions(+), 330 deletions(-) diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 3944d11..8fb09d8 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useLayoutEffect, useState } from "react"; import axios from "axios" import { RootState } from "../../store/store"; @@ -26,6 +26,8 @@ import typeToIconMap from "../../helper/iconMap"; import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer"; import SignCompletionScreen from "./SignCompletionScreen"; import api from "../../config/api"; +import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar"; +import { RiDragMoveFill } from "react-icons/ri"; @@ -139,12 +141,6 @@ const fitObj = [ const SignDocument = () => { - useEffect(() => { - axios.get("https://concrete-gladly-mullet.ngrok-free.app/api/sign/session?recipientId=103&sessionId=iqlo2inofsqaqib8mcos4njssj").then((res) => { - console.log(res, "RESPONSE") - }) - }, []) - const { recipientId } = useParams(); const dispatch = useDispatch(); @@ -234,6 +230,8 @@ const SignDocument = () => { }, [droppedItems]) + console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}") + useEffect(() => { if (recSignStatus === "COMPLETED") { // setHideTags(true); @@ -686,6 +684,7 @@ const SignDocument = () => { // } if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) { + const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex) setSignConfObj({ ...signConfObj, @@ -1012,7 +1011,6 @@ const SignDocument = () => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => { const key = `${doc.documentId}_${page.index}`; // const tagJsonData = [...droppedItems]; - const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) return (
{
setFocusElement({ ...item, focusElementIndx: index })} + onFocus={() => { + setSelectedTag({ key, index }) + setFocusElement({ ...item, focusElementIndx: index }) + } + } key={item.id} // draggable="false" - onPointerDown={(e) => handleTagMouseDown(e, key, index)} + // onPointerDown={(e) => handleTagMouseDown(e, key, index)} className="absolute rounded dropped-item text-sm" // onClick={() => handleTagClick(key, index)} style={{ @@ -1048,6 +1050,15 @@ const SignDocument = () => { // display: `${hideTags ? 'none' : 'block'}` }} > + {provideTags && !transparentTags && !hideTags &&
handleTagMouseDown(e, key, index)} + // className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30" + title="Drag" + > + +
} <> {selectedTag?.key && selectedTag.key === key && selectedTag.index === index && @@ -1088,7 +1099,7 @@ const SignDocument = () => { */} { - item.subType === "SINGLE_LINE" &&

{ @@ -1103,7 +1114,7 @@ const SignDocument = () => { >

} { - item.subType === "PARAGRAPH" &&

{ const val = e.currentTarget.textContent; handleTagUpdate(index, val as string); @@ -1114,7 +1125,7 @@ const SignDocument = () => {

} { - item.subType === "PASSWORD" && item.mask &&

{ const val = e.currentTarget.textContent; handleTagUpdate(index, val as string); @@ -1122,13 +1133,13 @@ const SignDocument = () => { onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault(); }} - onFocus={() => { - }} + // onFocus={() => { + // }} onBlur={(e) => { let val = e.target.textContent; - if (typeof item.mask?.maskType === "string" && typeof val === "string") { + if (typeof item.maskType === "string" && typeof val === "string") { val = val.replace(/ /g, ""); - e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter) + e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter) } }} contentEditable={true} @@ -1139,6 +1150,125 @@ const SignDocument = () => { } {/* TEXT FIELD - END */} + {/* EMAIL FIELD - START */} + { + item.type === "EMAIL" && +

+ { +

{ + const val = e.currentTarget.textContent; + handleTagUpdate(index, val as string); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + const val = e.currentTarget.textContent?.trim() || ""; + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (val && !emailRegex.test(val)) { + alert("Please enter a valid email address"); + handleTagUpdate(index, "" as string) + e.currentTarget.textContent = ""; + e.currentTarget.focus(); // Optional: return focus if invalid + } + e.preventDefault() + }; + }} + + onBlur={(e) => { + const val = e.currentTarget.textContent?.trim() || ""; + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (val && !emailRegex.test(val)) { + alert("Please enter a valid email address"); + handleTagUpdate(index, "" as string) + e.currentTarget.textContent = ""; + e.currentTarget.focus(); // Optional: return focus if invalid + } + }} + contentEditable={true} + className="outline-none whitespace-nowrap w-full max-h-max" + >

+ } +
+ } + {/* EMAIL FIELD - END */} + + + {/* NAME FIELD - START */} + { + item.type === "NAME" && +
+ { +

{ + const val = e.currentTarget.textContent; + handleTagUpdate(index, val as string); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault() + }; + }} + + onBlur={(e) => { + + }} + contentEditable={true} + className="outline-none whitespace-nowrap w-full max-h-max" + >

+ } +
+ } + {/* NAME FIELD - END */} + + + + {/* COMPANY FIELD - START */} + { + item.type === "COMPANY" && +
+ { +

{ + const val = e.currentTarget.textContent; + handleTagUpdate(index, val as string); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault() + }; + }} + + onBlur={(e) => { + + }} + contentEditable={true} + className="outline-none whitespace-nowrap w-full max-h-max" + >

+ } +
+ } + {/* COMPANY FIELD - END */} + {/* CHECKBOX FIELD - START */} { @@ -1368,12 +1498,12 @@ const SignDocument = () => { { (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) && <> -
-

{focusElement.label}

-
+ {/*
+

{focusElement.label}

+
*/}
{
} -
+
) }) @@ -1433,11 +1563,27 @@ const SignDocument = () => { -
- + {/* + dropDownTogglePage={dropDownTogglePage} /> */} + + + + + {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && + } + + +
{/* Right Side - START */} diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx index 3a8b4fc..02d4237 100644 --- a/src/components/home/StartSection.tsx +++ b/src/components/home/StartSection.tsx @@ -84,7 +84,7 @@ const StartSection = () => {

Get Started

-
+
@@ -93,7 +93,7 @@ const StartSection = () => {
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`} + className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`} > {/* Icon + Text */}
@@ -124,7 +124,7 @@ const StartSection = () => {
-

Recent Activities

+

Recent Activities

diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index 3799711..e0c2881 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -4,7 +4,7 @@ import { RootState } from '../../../store/store' import api from '../../../config/api'; -import RightSideBar from './rightSideBar/RightSideBar'; +import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar'; import { DroppedItem, TagsTypes } from '../../../utlity/types'; import { useNavigate, useParams } from 'react-router-dom'; @@ -89,13 +89,118 @@ const DocumentContainer: React.FC = ({ transactionSaving for (const tag of res.data) { const key = `${tag.documentId}_${tag.pageIndex}`; if (recTags[key]) { - recTags[key].push({ ...tag, update: false }); + recTags[key].push(tag); } else { - recTags[key] = [{ ...tag, update: false }]; // Initialize with an array + recTags[key] = [tag]; // Initialize with an array } } } - // console.log(recTags, "Line 83"); + + + + + + + + let updatedTags = { ...recTags } + let tagsData = [] + + for (const dropPageIds of Object.keys(updatedTags)) { + + for (const dropTag of updatedTags[dropPageIds]) { + let mask = null + + // console.log(dropTag, "line 132") + + // if (dropTag.subType?.toLowerCase() === "password") { + // console.log(dropTag) + mask = { + "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, + "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null + } + // } + + // console.log(dropTag, "line 204") + + const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false + + const updatedTagData = { + "id": "id" in dropTag ? dropTag.id : null, + "label": dropTag.label, + "dimensions": dropTag.dimensions, + "type": dropTag.type.toUpperCase(), + // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null), + "minLength": "minLength" in dropTag ? dropTag.minLength : 0, + "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0, + "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error", + "regex": "regex" in dropTag ? dropTag.regex : [] + // } + , + "documentId": dropTag.documentId, + "options": ("options" in dropTag) ? dropTag.options : [], + "pageIndex": dropTag.pageIndex, + "recipientId": dropTag.recipientId, + "styles": "styles" in dropTag ? dropTag.styles : { + "font": "", + "italic": false, + "bold": false, + "underline": false, + "color": "black", + "textSize": 0 + }, + "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true, + // "required": "required" in dropTag ? dropTag.required : , + "update": "update" in dropTag ? dropTag.update : false, + "readOnly": false, + } + + // if ("format" in dropTag) { + // updatedTagData.format = `${dropTag.subType}`.toUpperCase(); + // updatedTagData.dateFormat = dropTag.format; + // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp + // } + + if("format" in dropTag && dropTag.format) { + updatedTagData.subType = dropTag.format.toLowerCase(); + updatedTagData.format = dropTag.dateFormat; + } + + if (`${dropTag.type}`.toLowerCase() === "number") { + updatedTagData.decimalPlace = dropTag.decimalPlace + updatedTagData.isCurrency = dropTag.isCurrency + } + + if (dropTag.type === "TEXT") { + // updatedTagData.multiLine = dropTag.subType === "paragraph" + + if(dropTag.multiLine) { + updatedTagData.subtype = TEXT.PARAGRAPH + } else { + updatedTagData.subtype = TEXT.SINGLE_LINE + } + + if ("maskType" in dropTag) { + updatedTagData.maskCharacter = mask.character + updatedTagData.maskType = mask.type + } + } + + // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required; + + if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" + if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT" + + if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options; + + if (!updatedTagData.id) delete updatedTagData.id; + + if (!isDeleted) { + // sendTags.mod.push(updatedTagData); + tagsData.push(updatedTagData) + } + } + } + setDroppedItems(recTags) // Handle your response here } catch (err) { @@ -125,17 +230,14 @@ const DocumentContainer: React.FC = ({ transactionSaving const groupByRecipientId = (tagsArray: any[]) => { const tagsData: Record = {}; - for (const tag of tagsArray) { const recipientId = tag.recipientId; if (!tagsData[recipientId]) { tagsData[recipientId] = []; } - tagsData[recipientId].push(tag); } - return tagsData; }; @@ -161,6 +263,7 @@ const DocumentContainer: React.FC = ({ transactionSaving delete updateTags[updateTags.length - 1].update } } + updatedData[recipientId] = updateTags } @@ -173,29 +276,16 @@ const DocumentContainer: React.FC = ({ transactionSaving }); try { - const response = await Promise.all(requests); + const responses = await Promise.all(requests); - let recTags = droppedItems; + const droppedItemsUpdateFalse = Object.fromEntries( + Object.entries(droppedItems).map(([recipientId, tags]) => { + return [recipientId, tags.map(tag => ({ ...tag, update: false }))]; + }) + ) - 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(droppedItemsUpdateFalse, "Line 182") - 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); @@ -204,118 +294,125 @@ const DocumentContainer: React.FC = ({ transactionSaving const handleTransactionProcess = async (save: boolean = false) => { - console.log(droppedItems, "called Line 189"); if (Object.keys(droppedItems).length === 0) return; if (!save && isSend === null) return; - !save && dispatch(showLoader("Loading ...")) + // !save && dispatch(showLoader("Loading ...")) - let updatedTags = { ...droppedItems } + // let updatedTags = { ...droppedItems } // const sendTags = { // "mod": [], // "remove": [] // } - let tagsData = [] + // let tagsData = [] // const modified = [] // const remove = [] // console.log(updatedTags, "updatedTags"); - for (const dropPageIds of Object.keys(updatedTags)) { - for (const dropTag of updatedTags[dropPageIds]) { - let mask = null + // for (const dropPageIds of Object.keys(updatedTags)) { + // for (const dropTag of updatedTags[dropPageIds]) { + // let mask = null - // console.log(dropTag, "line 132") + // // console.log(dropTag, "line 132") - // if (dropTag.subType?.toLowerCase() === "password") { - // console.log(dropTag) - mask = { - "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, - "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null - } - // } + // // if (dropTag.subType?.toLowerCase() === "password") { + // // console.log(dropTag) + // mask = { + // "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, + // "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null + // } + // // } - // console.log(dropTag, "line 204") + // // console.log(dropTag, "line 204") - const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false + // const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false - const updatedTagData = { - "id": "id" in dropTag ? dropTag.id : null, - "label": dropTag.label, - "dimensions": dropTag.dimensions, - "type": dropTag.type.toUpperCase(), - // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null), - "minLength": "minLength" in dropTag ? dropTag.minLength : 0, - "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0, - "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error", - "regex": "regex" in dropTag ? dropTag.regex : [] - // } - , - "documentId": dropTag.documentId, - "options": ("options" in dropTag) ? dropTag.options : [], - "pageIndex": dropTag.pageIndex, - "recipientId": dropTag.recipientId, - "styles": "styles" in dropTag ? dropTag.styles : { - "font": "", - "italic": false, - "bold": false, - "underline": false, - "color": "black", - "textSize": 0 - }, - "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true, - // "required": "required" in dropTag ? dropTag.required : , - "update": "update" in dropTag ? dropTag.update : false, - "readOnly": false, - } + // const updatedTagData = { + // "id": "id" in dropTag ? dropTag.id : null, + // "label": dropTag.label, + // "dimensions": dropTag.dimensions, + // "type": dropTag.type.toUpperCase(), + // // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null), + // "minLength": "minLength" in dropTag ? dropTag.minLength : 0, + // "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0, + // "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error", + // "regex": "regex" in dropTag ? dropTag.regex : [] + // // } + // , + // "documentId": dropTag.documentId, + // "options": ("options" in dropTag) ? dropTag.options : [], + // "pageIndex": dropTag.pageIndex, + // "recipientId": dropTag.recipientId, + // "styles": "styles" in dropTag ? dropTag.styles : { + // "font": "", + // "italic": false, + // "bold": false, + // "underline": false, + // "color": "black", + // "textSize": 0 + // }, + // "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true, + // // "required": "required" in dropTag ? dropTag.required : , + // "update": "update" in dropTag ? dropTag.update : false, + // "readOnly": false, + // } - if ("format" in dropTag) { - updatedTagData.format = `${dropTag.subType}`.toUpperCase(); - updatedTagData.dateFormat = dropTag.format; - updatedTagData.currentTimeStamp = dropTag.currentTimeStamp - } + // if ("format" in dropTag) { + // updatedTagData.format = `${dropTag.subType}`.toUpperCase(); + // updatedTagData.dateFormat = dropTag.format; + // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp + // } - if (`${dropTag.type}`.toLowerCase() === "number") { - updatedTagData.decimalPlace = dropTag.decimalPlace - updatedTagData.isCurrency = dropTag.isCurrency - } + // if (`${dropTag.type}`.toLowerCase() === "number") { + // updatedTagData.decimalPlace = dropTag.decimalPlace + // updatedTagData.isCurrency = dropTag.isCurrency + // } - if (updatedTagData.type === "TEXT") { - updatedTagData.multiLine = dropTag.subType === "paragraph" - if (dropTag.subType === "password") { - updatedTagData.maskCharacter = mask.character - updatedTagData.maskType = mask.type - } - } + // if (updatedTagData.type === "TEXT") { + // updatedTagData.multiLine = dropTag.subType === "paragraph" + // if (dropTag.subType === "password") { + // updatedTagData.maskCharacter = mask.character + // updatedTagData.maskType = mask.type + // } + // } - // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required; + // // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required; - if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" - if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT" + // if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" + // if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT" - if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options; + // if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options; - if (!updatedTagData.id) delete updatedTagData.id; + // if (!updatedTagData.id) delete updatedTagData.id; - if (!isDeleted) { - // sendTags.mod.push(updatedTagData); - tagsData.push(updatedTagData) - } - } + // if (!isDeleted) { + // // sendTags.mod.push(updatedTagData); + // tagsData.push(updatedTagData) + // } + // } + // } + + let updatedTags : any = []; + + for (const dropPagesId of Object.keys(droppedItems)) { + console.log("Dropped Item:", droppedItems[dropPagesId]); + updatedTags.push(...droppedItems[dropPagesId]); } - tagsData = groupByRecipientId(tagsData); + console.log(updatedTags, "updatedTags") - console.log("Hefre is the line 299", tagsData); + let tagsData = groupByRecipientId(updatedTags); await sendTagsToRecipients(tagsData, accountId, transactionId); // if (save) { - // setSelectedTag(null); - // await fetchTags(); + // if (selectedRecipients.length === 0) return; + // fetchTags(); + // setSelectedTag(null) // } // SENDING Transaction - START @@ -339,7 +436,7 @@ const DocumentContainer: React.FC = ({ transactionSaving const interval = setInterval(async () => { // debugger setTransactionSaving(true) - handleTransactionProcess(true); + // handleTransactionProcess(true); }, 8000) // }, 8000) return () => clearInterval(interval); @@ -382,11 +479,11 @@ const DocumentContainer: React.FC = ({ transactionSaving // const IconComponent = typeToIconMap[field.type] || ; let prepData = { - properties: data.properties, + ...data.properties, icon: typeToIconMap[field.label.toUpperCase()] || , type: dragElemData.label, label: dragElemData.label, - subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', + // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', dimensions: { left: x, top: y, @@ -952,85 +1049,6 @@ const DocumentContainer: React.FC = ({ transactionSaving return () => clearTimeout(timeoutId); }, [droppedItems]); // Re-run when droppedItems changes - - const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => { - if (!selectedTag) return; - - const { key, index } = selectedTag; - const currentItem = droppedItems[key]?.[index]; - - if (!currentItem) return; - - let newLeft = currentItem.dimensions.left; - let newTop = currentItem.dimensions.top; - - switch (direction) { - case 'up': - newTop = Math.max(0, newTop - stepSize); - break; - case 'down': - newTop = newTop + stepSize; - break; - case 'left': - newLeft = Math.max(0, newLeft - stepSize); - break; - case 'right': - newLeft = newLeft + stepSize; - break; - } - - setDroppedItems({ - ...droppedItems, - [key]: Array.isArray(droppedItems[key]) - ? droppedItems[key].map((item, i) => - i === index - ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true } - : item - ) - : [], - }); - }; - - const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => { - handleDirectionalMove(direction, 5); // Use default stepSize of 5 - }; - - // Add this new handler function to your parent component - const handleDirectPositionChange = (newLeft: number, newTop: number) => { - console.log("handleDirectPositionChange", newLeft, newTop) - if (!selectedTag) return; - - const { key, index } = selectedTag; - const currentItem = droppedItems[key]?.[index]; - - if (!currentItem) return; - - // Ensure values are not negative - const clampedLeft = Math.max(0, newLeft); - const clampedTop = Math.max(0, newTop); - - setDroppedItems({ - ...droppedItems, - [key]: Array.isArray(droppedItems[key]) - ? droppedItems[key].map((item, i) => - i === index - ? { - ...item, - dimensions: { - ...item.dimensions, - left: clampedLeft, - top: clampedTop - }, - update: true - } - : item - ) - : [], - }); - }; - - console.log(droppedItems, "Line 1022") - return ( <> {/* Center Doc Container - START */} @@ -1162,7 +1180,6 @@ const DocumentContainer: React.FC = ({ transactionSaving /> - {/* Side details of documents Pages and document Name - START */}

page {indx + 1} of {doc.pages && doc.pages.length} @@ -1188,17 +1205,16 @@ const DocumentContainer: React.FC = ({ transactionSaving

- { - console.log(selectedTag, droppedItems, "Line 1175") - } + {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && - {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && } + } {/* Center Doc Container - END */} ) diff --git a/src/components/process/processStepTwo/FieldList.tsx b/src/components/process/processStepTwo/FieldList.tsx index 5c9cac0..a1b99a2 100644 --- a/src/components/process/processStepTwo/FieldList.tsx +++ b/src/components/process/processStepTwo/FieldList.tsx @@ -99,6 +99,7 @@ const FieldList: React.FC = ({ color, recipientId, recipientIndx .map((type) => prioritized.find((tag: any) => tag.type === type)) .filter(Boolean); // remove undefined in case not found + setTagsData([...prioritizedSorted, ...others]); }) .catch((err) => { diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 68243df..ba94dba 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -125,9 +125,9 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField setTimeout(() => { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (isSignSend) { - window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); + navigate(`./../../../sign/${selfUserSign.recipientId}`); } - else { + else { navigate(`/document-completion-screen/${accountId}/${transactionId}`) } } else { @@ -144,7 +144,7 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField transition: Bounce, }); } - }, 0) + }, 1000) } const handleSetIsFields = (setTo: boolean) => { diff --git a/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx b/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx index d304a3f..16fbe57 100644 --- a/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx +++ b/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx @@ -67,7 +67,10 @@ const DirectionalControls: React.FC = ({ }; const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => { - if (e.key === 'Enter') handlePositionInputBlur(type); + if (e.key === 'Enter') { + e.preventDefault(); + handlePositionInputBlur(type) + }; }; useEffect(() => { @@ -106,13 +109,13 @@ const DirectionalControls: React.FC = ({ return (
{/* Top */} - {/* Middle: Left / Inputs / Right */}
- @@ -121,7 +124,7 @@ const DirectionalControls: React.FC = ({ handlePositionInputChange('left', e.target.value)} + onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}} onBlur={() => handlePositionInputBlur('left')} onKeyPress={(e) => handleKeyPress(e, 'left')} disabled={disabled} @@ -131,7 +134,7 @@ const DirectionalControls: React.FC = ({ handlePositionInputChange('top', e.target.value)} + onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}} onBlur={() => handlePositionInputBlur('top')} onKeyPress={(e) => handleKeyPress(e, 'top')} disabled={disabled} @@ -140,13 +143,13 @@ const DirectionalControls: React.FC = ({ />
-
{/* Bottom */} - {/* Middle Row: Left - Center (Inputs) - Right */} diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index 227accc..4afa689 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -27,16 +27,18 @@ import DirectionalControls from "./DirectionalControls"; // } export interface DroppedItemProps { + droppedItems: DroppedItem[] selectedTag: DroppedItem setDroppedItems: React.Dispatch> selTagKey: string, selTagIndx: number, - DirectionalControlsProps: { - onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; - disabled?: boolean; - stepSize?: number; - className?: string; - } + signClient: boolean, + // DirectionalControlsProps: { + // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; + // disabled?: boolean; + // stepSize?: number; + // className?: string; + // } } export enum TEXT { @@ -103,14 +105,12 @@ const defaultStyles = { -const RightSideBar: React.FC = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => { +const RightSideBar: React.FC = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => { + + console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems) const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap]; - console.log("selectedTag", selectedTag, selectedType) - - - const [styles, setStyles] = useState(defaultStyles); const [dropDownToggle, setDropDownToggle] = useState(null); @@ -118,71 +118,64 @@ const RightSideBar: React.FC = ({ selectedTag, setDroppedItems const [styleOpen, setStyleOpen] = useState(false); const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { - console.log("changeTo", changeTo, "changeWith", changeWith) if (changeTo === '' || changeWith === '') return - // if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) { - // // let change: string = changeWith; - // // if (change === "DATE TIME") { - // // change = "DATE_TIME" - // // } - // setDroppedItems((prev) => { - // console.log("Temporal30", prev); - // return { - // ...prev, - // [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array - // ? prev[selTagKey].map((item, i) => - // i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item - // ) - // : [], // Fallback in case it's undefined or not an array - // }; - // }); + if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { - // } else - - if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { - console.log("Second check") - console.log("Line 161") - setDroppedItems((prev) => ( - { - ...prev, - [selTagKey]: Array.isArray(prev[selTagKey]) - ? prev[selTagKey].map((item, i) => - i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item - ) - : [], - } - )); - } - else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) { - console.log("Third check") + if (!signClient) { + setDroppedItems((prev) => ( + { + ...prev, + [selTagKey]: Array.isArray(prev[selTagKey]) + ? prev[selTagKey].map((item, i) => + i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item + ) + : [], + } + )); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } + return updated; + }) + } + } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) { let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace; const isCurrency = changeWith === NUMBER.CURRENCY; // const currencyType = null - setDroppedItems((prev) => ( - { - ...prev, - [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array - ? prev[selTagKey].map((item, i) => - i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item - ) - : [], - }// Provide a fallback in case it's undefined or not an array - )); + if (!signClient) { + setDroppedItems((prev) => ( + { + ...prev, + [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array + ? prev[selTagKey].map((item, i) => + i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item + ) + : [], + }// Provide a fallback in case it's undefined or not an array + )); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } + return updated; + }) + } + + } + + - } - - - else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) { - console.log("Fourth Check") + let val = timeFormats[0].format; - console.log(is24Hrs, "is24Hrs Line 176") + if (is24Hrs === null) { val = timeFormats[0].format - } else if(!is24Hrs) { + } else if (!is24Hrs) { val = timeFormats[1].format } else { val = timeFormats[0].format @@ -193,41 +186,57 @@ const RightSideBar: React.FC = ({ selectedTag, setDroppedItems // changeWith = changeWith + " " + val; // } - setDroppedItems((prev) => { - const updatedArray = Array.isArray(prev[selTagKey]) - ? prev[selTagKey].map((item, i) => { - if (i === selTagIndx) { - const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true }; - console.log('Updating item at index', i, 'with:', updatedItem); - return updatedItem; - } - return item; - }) - : []; - return { - ...prev, - [selTagKey]: updatedArray, - }; - }); - } - + if (!signClient) { + setDroppedItems((prev) => { + const updatedArray = Array.isArray(prev[selTagKey]) + ? prev[selTagKey].map((item, i) => { + if (i === selTagIndx) { + const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true }; + console.log('Updating item at index', i, 'with:', updatedItem); + return updatedItem; + } + return item; + }) + : []; + + return { + ...prev, + [selTagKey]: updatedArray, + }; + }); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true } + return updated; + }) + } + } + else { - setDroppedItems((prev) => { - const updatedItems = Array.isArray(prev[selTagKey]) - ? prev[selTagKey].map((item, i) => - i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item - ) - : []; + if (!signClient) { + setDroppedItems((prev) => { - console.log('Updated items:', updatedItems); + const updatedItems = Array.isArray(prev[selTagKey]) + ? prev[selTagKey].map((item, i) => + i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item + ) + : []; - return { - ...prev, - [selTagKey]: updatedItems, - }; - }); + return { + ...prev, + [selTagKey]: updatedItems, + }; + }); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true } + return updated; + }) + } } setDropDownToggle(null) @@ -319,6 +328,110 @@ const RightSideBar: React.FC = ({ selectedTag, setDroppedItems handlePropertyChange("styles", updatedStyles); }; + const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => { + if (!selectedTag) return; + + const currentItem = droppedItems[selTagKey]?.[selTagIndx]; + + if (!currentItem) return; + + let newLeft = currentItem.dimensions.left; + let newTop = currentItem.dimensions.top; + + switch (direction) { + case 'up': + newTop = Math.max(0, newTop - stepSize); + break; + case 'down': + newTop = newTop + stepSize; + break; + case 'left': + newLeft = Math.max(0, newLeft - stepSize); + break; + case 'right': + newLeft = newLeft + stepSize; + break; + } + + if (!signClient) { + setDroppedItems({ + ...droppedItems, + [selTagKey]: Array.isArray(droppedItems[selTagKey]) + ? droppedItems[selTagKey].map((item, i) => + i === selTagIndx + ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true } + : item + ) + : [], + }); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { ...updated[selTagIndx], dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true } + return updated; + }) + } + }; + + const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => { + handleDirectionalMove(direction, 5); // Use default stepSize of 5 + }; + + const handleDirectPositionChange = (newLeft: number, newTop: number) => { + if (!selectedTag) return; + + const currentItem = droppedItems[selTagKey]?.[selTagIndx]; + + if (!currentItem) return; + + // Ensure values are not negative + const clampedLeft = Math.max(0, newLeft); + const clampedTop = Math.max(0, newTop); + + if (!signClient) { + setDroppedItems({ + ...droppedItems, + [selTagKey]: Array.isArray(droppedItems[selTagKey]) + ? droppedItems[selTagKey].map((item, i) => + i === selTagIndx + ? { + ...item, + dimensions: { + ...item.dimensions, + left: clampedLeft, + top: clampedTop + }, + update: true + } + : item + ) + : [], + }); + } else { + setDroppedItems((prev) => { + const updated = [...prev]; + updated[selTagIndx] = { + ...item, + dimensions: { + ...item.dimensions, + left: clampedLeft, + top: clampedTop + }, + update: true + } + return updated + }) + } + }; + + const DirectionalControlsProps = { + onMove: directionalControlsHandler, + onPositionChange: handleDirectPositionChange, + disabled: false, + stepSize: 5, + className: '' + } + return ( <> diff --git a/src/utlity/types.tsx b/src/utlity/types.tsx index cd7ffd1..cec7038 100644 --- a/src/utlity/types.tsx +++ b/src/utlity/types.tsx @@ -1,6 +1,6 @@ import { JSX } from "react"; -export interface DroppedItem { +export interface DroppedItemOld { id?: string; icon: JSX.Element; focusElementIndx?: number; @@ -122,4 +122,62 @@ export enum TagsTypes { export enum SignTypeEnum { selfSign = "self_sign", multipleSign = "multi_sign" +} + + + + +interface StylesInterface { + font: string, + italic: boolean, + bold: boolean, + underline: boolean, + color: string, + textSize: number +} + + +export interface DroppedItem { + id?: string; + icon: JSX.Element; + label?: string; + type: string; + + dimensions: { + left: number; + top: number; + width: number; + height: number; + } + recipientId: number; + + documentId: string; + pageIndex: number; + + allowSenderToEdit: true; + allowSenderToDelete: true; + + required?: boolean; + + maskType?: string; + maskCharacter?: string; + format?: string; + + selectedValue?: string | null; + + radioGroups?: DroppedItem[]; + options?: string[] + + focusElementIndx?: number; + + value?: string | number; + + validation?: { + minLength: number; + maxLength: number; + error: string; + regex: string[]; + }; + + isDeleted: boolean; } \ No newline at end of file