diff --git a/.env b/.env index 23bf83b..98c85da 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ -# VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app" +VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app" # VITE_BASE_URI="https://python-amused-adder.ngrok-free.app" -VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app" \ No newline at end of file +# VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app" \ No newline at end of file diff --git a/src/components/client/DocumentPages.tsx b/src/components/client/DocumentPages.tsx index 6e6c0e5..ea4cf05 100644 --- a/src/components/client/DocumentPages.tsx +++ b/src/components/client/DocumentPages.tsx @@ -14,7 +14,7 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl const [currentPage, setCurrentPage] = useState(0); return ( -
+
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => { @@ -34,7 +34,7 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl document.pages != undefined && } diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 39850d4..89fed20 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -1,9 +1,9 @@ -import { useEffect, useLayoutEffect, useState } from "react"; +import { useEffect, useState } from "react"; import axios from "axios" import { RootState } from "../../store/store"; import { useNavigate, useParams } from "react-router-dom" -import { DroppedItem, DroppedItemsObj, TagsTypes } from "../../utlity/types"; +import { DroppedItem, TagsTypes } from "../../utlity/types"; import Loader from "../dashboard/Loader"; import SignCon from "../signature/SignCon"; @@ -11,24 +11,22 @@ import { Bounce, toast } from "react-toastify"; import { useDispatch, useSelector } from "react-redux"; import { hideLoader, showLoader } from "../../store/slices/loaderSlice"; -import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa' +import { FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa' import { IoIosDocument, IoMdClose } from 'react-icons/io' import { MdKeyboardArrowDown } from 'react-icons/md' -import { TbChevronsDownLeft, TbSignature } from "react-icons/tb"; +import { TbSignature } from "react-icons/tb"; import { BsFileArrowDownFill } from "react-icons/bs"; import dayjs from "dayjs"; import maskUtils from "../../utlity/maskUtils"; import StampUpload from "../stamp/StampUpload"; -import TermsModal from "./TermsModal"; import DocumentPages from "./DocumentPages"; import FieldList from "../process/processStepTwo/FieldList"; 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"; import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils"; +import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar"; @@ -45,6 +43,7 @@ interface RecipientType { phone: string | null; index: number; type: string; + provideOwnTags: boolean; recipientStatus: string; authType: string | null; language: string | null; @@ -134,6 +133,11 @@ const fitObj = [ }, ] +enum RightSideNav { + ATTRIBUTES = "attributes", + PAGES = "pages" +} + // Functions - LIST // handleSignClick - Handle when sign || Initial tag got clicked // fetchData - Fetch document pages and tags data @@ -157,6 +161,7 @@ const SignDocument = () => { const [stamp, setStamp] = useState({ open: false, blob: "" }); + const [rightSideNavToggle, setRightSideNavToggle] = useState(RightSideNav.PAGES); // Handling Date Opacity const [dateValues, setDateValues] = useState<{ [key: string]: string }>({}); @@ -348,6 +353,8 @@ const SignDocument = () => { setTransaction(res?.data?.transaction) setRecSignStatus(res?.data?.status) + if (res?.data?.details.provideOwnTags) setRightSideNavToggle(RightSideNav.ATTRIBUTES) + if ("provideOwnTags" in res?.data?.details && res?.data?.details.provideOwnTags) { setProvideTags(true) } @@ -938,6 +945,10 @@ const SignDocument = () => { }; + const handleSetIsFields = (setTo: boolean) => { + if (setTo !== isFields) setIsFields(setTo); + } + // const [showTerms, setShowTerms] = useState(true); return ( @@ -990,6 +1001,19 @@ const SignDocument = () => {
{/* FIT - END */} + {provideTags &&
handleSetIsFields(true)} + className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}> + +

Fields

+
} + +
handleSetIsFields(provideTags ? false : !isFields)} + className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}> + +

Pages

+
@@ -1060,17 +1084,21 @@ const SignDocument = () => { {/*
*/}
- {recipientId && provideTags && } + className={`col-span-2 h-full ${isFields ? "p-4" : ""} overflow-y-auto bg-white ${!provideTags && isFields ? "hidden" : ""}`}> + {isFields && recipientId && provideTags && } + + {!isFields && } +
- - {/* Pages - END */} {/* Main container */}
{ @@ -1669,15 +1697,9 @@ const SignDocument = () => {
-
- {selectedDocuments !== null && } - - - - {/* {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && + {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && +
+ {/* Right Side Attributes Section if providedTags - START */} { selTagKey={selectedTag.key} selTagIndx={selectedTag.index} signClient={true} - />} */} - - - + /> + {/* Right Side Attributes Section if providedTags - END */}
+ } {/* Right Side - START */} {/*
diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx index 641c8ca..f01dd59 100644 --- a/src/components/home/StartNow.tsx +++ b/src/components/home/StartNow.tsx @@ -24,7 +24,10 @@ const StartNow = () => { const transactionId = transactionRes.data.id const formData = new FormData(); - formData.append("file", filesToUpload[0]); + + filesToUpload.forEach(file => { + formData.append("file", file); + }); dispatch(uploadDocuments({ formData, accountId, transactionId })) .unwrap() diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx index f1d07ec..381dc54 100644 --- a/src/components/home/StartSection.tsx +++ b/src/components/home/StartSection.tsx @@ -125,13 +125,13 @@ const StartSection = () => {
{/* Recent Data Section */} -
+
-
+ {/*
-
+
*/}
diff --git a/src/components/process/RecipientAddCard.tsx b/src/components/process/RecipientAddCard.tsx deleted file mode 100644 index f85a325..0000000 --- a/src/components/process/RecipientAddCard.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useState } from "react"; -import { FaPlus } from "react-icons/fa"; - -type RecipientAddCardProps = { - addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed -}; - -const RecipientAddCard: React.FC = ({ addRecipient }) => { - - const [recipient] = useState() - - const handleRecipientAdd = () => { - - } - - - return ( -
-

Add Recipient Details

-
- -
-
- -
- -
-
- {[ - { label: "Mail To Sign", value: "mailToSign" }, - { label: "In-Person", value: "inPerson" }, - { label: "CC", value: "cc" } - ].map((option) => ( - - ))} -
- - - -
- -
- ); -}; - -export default RecipientAddCard; \ No newline at end of file diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx index b79f52c..264371a 100644 --- a/src/components/process/processStepOne/DocumentCard.tsx +++ b/src/components/process/processStepOne/DocumentCard.tsx @@ -39,7 +39,7 @@ const DocumentCard: React.FC = ({ id, name, isCompleted , tra let lastUpdate = 0; const delay = 1000; - const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`); + const docProgSSE = new EventSource(`http://192.168.2.176:8083/api/progress/${id}`); docProgSSE.addEventListener('progress', (event) => { const jsonData = JSON.parse(event.data); diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index eba3c0f..b3742ae 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/src/components/process/processStepOne/ProcessStepOne.tsx @@ -47,16 +47,6 @@ const ProcessStepOne = () => { const [editCase, setEditCase] = useState("") const [editRecipient, setEditRecipient] = useState({}) - - - // if (!accountId || !transactionId) { - // window.location.href = "/"; - // return null; - // } - - // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments) - // const { selectedDocuments, signType } = useSelector((state: RootState) => state.selectedDocuments) - const selectedDocuments = useSelector((state: RootState) => state.documents.documents) const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients) const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false) @@ -82,13 +72,9 @@ const ProcessStepOne = () => { }, 5000); // hide icon while typing, show it again after 500ms of no input }; - // const userData = useSelector((state: RootState) => state.user) - const [transactionDetails, setTransactionDetails] = useState([]); useEffect(() => { - // <<<<<<< HEAD - // Fetching Transaction Details - START (async () => { try { const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`); @@ -105,31 +91,24 @@ const ProcessStepOne = () => { } catch (e) { } })() - // Fetching Transaction Details - END - - // ======= - // (async () => { - // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) - // })() - // >>>>>>> origin/main - - // (async () => { - // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) - // })() selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId })); selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId })); }, []) - // const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder) - // const user = useSelector((state: RootState) => state.user) - const [emailDtls, setEmailDtls] = useState({ subject: "Documents for Signature", message: "" }); useEffect(() => { dispatch(hideLoader()); }, []) + + const getMinRoutingOrder = () => { + return selectedRecipients.reduce((min, recipient) => { + return Math.min(min, recipient.routingOrder ?? Infinity); + }, Infinity); + }; + const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const handleNextClick = async (saveAndClose: boolean = false) => { @@ -208,13 +187,13 @@ const ProcessStepOne = () => { dispatch(showLoader("Processing Recipients...")); - let minRoutingOrder = 1 - selectedRecipients.forEach((recipient) => { - if (recipient.routingOrder ?? 1 < minRoutingOrder) { - minRoutingOrder = recipient.routingOrder ?? 1; - } - }); - + let minRoutingOrder = getMinRoutingOrder(); + // selectedRecipients.forEach((recipient) => { + // if (recipient.routingOrder ?? 1 < minRoutingOrder) { + // minRoutingOrder = recipient.routingOrder ?? 1; + // } + // }); + const recipientsData = selectedRecipients.map((recipient, index) => ({ id: "id" in recipient ? recipient.id : null, routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1, @@ -248,11 +227,10 @@ const ProcessStepOne = () => { await Promise.all( selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({ recipientId: recipient.id, - email: recipient.email, accountId, transactionId, - })) - ) + email: recipient.email, + }))) ); recipientsDataTemp = [{ @@ -273,9 +251,11 @@ const ProcessStepOne = () => { phone: "", accessCode: "", accessCodeDelivery: true, - language: "en", + language: userData.language ? userData.language : "en", name: `${userData.firstName} ${userData.lastName}`, - roleName: "" + roleName: "", + allowSenderToEdit: true, + allowSenderToDelete: true, }] try { @@ -287,7 +267,8 @@ const ProcessStepOne = () => { } } else { - await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); + if(!accountId || !transactionId) return; + dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); } dispatch(showLoader("Processing Message...")); @@ -297,11 +278,6 @@ const ProcessStepOne = () => { status: "CREATED" }) - // if (isSendNow) { - // dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS)); - // } - // else { - // setTimeout(() => { dispatch(resetDocuments()) dispatch(resetRecipients()) if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { @@ -397,7 +373,7 @@ const ProcessStepOne = () => { className='flex items-center gap-3'> {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
- + }
diff --git a/src/components/process/processStepOne/RecipientCards.tsx b/src/components/process/processStepOne/RecipientCards.tsx index 581107b..a15006c 100644 --- a/src/components/process/processStepOne/RecipientCards.tsx +++ b/src/components/process/processStepOne/RecipientCards.tsx @@ -26,6 +26,8 @@ const getInitials = (name: string) => { }; type CardsData = { + userEmail: string; + getMinRoutingOrder: () => number; editRecipient: any; setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known setEditCase: (string: any) => void; @@ -36,11 +38,10 @@ type CardsData = { }; -const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => { +const RecipientCards = ({ userEmail, getMinRoutingOrder, setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => { const templateId = useParams<{ templateId: string }>().templateId; let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); - const dispatch = useDispatch(); if (!transactionId) { @@ -59,12 +60,15 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg }; const handleEditRecipient = (recipient) => { + + const provideOwnTags = userEmail === recipient.email && (recipient.routingOrder ?? 1) === getMinRoutingOrder() ? true : false; // alert(JSON.stringify(recipient)) setEditCase('Edit') - setEditRecipient(recipient) + setEditRecipient({...recipient, provideOwnTags}) + if (recipient.uuid) { setEditRecipientCurrentEmail(recipient.uuid) - }else{ + } else { setEditRecipientCurrentEmail(recipient.id) } } @@ -148,11 +152,13 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg {recipients.length > 1 ?
- handleOrderChange(recipient.id || recipient.email, Number(e.target.value)) - } + value={recipient.routingOrder ? recipient.routingOrder : ""} + // min={1} + onChange={(e) => { + let val = e.target.value.replace(/^0+(?=\d)/, ""); + console.log(val, "Line 155") + handleOrderChange(recipient.id || recipient.email, Number(val)) + }} 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" /> {/* */} @@ -160,71 +166,71 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg : 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)]" />} - -
- {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)} -
-
-

- {recipient.firstName} {recipient.lastName || ""} -

-

- {recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""} -

-
+
+ {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
- {signType !== "self-sign" && ( -
- {/* Edit Button */} - - - {/* Delete Button */} - -
- - - )} +
+

+ {recipient.firstName} {recipient.lastName || ""} +

+

+ {recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""} +

+
- ) + + {signType !== "self-sign" && ( +
+ {/* Edit Button */} + + + {/* Delete Button */} + +
+ + + )} + + ) )} diff --git a/src/components/process/processStepOne/SelectedDocuments.tsx b/src/components/process/processStepOne/SelectedDocuments.tsx index f76fdd1..b78a6ea 100644 --- a/src/components/process/processStepOne/SelectedDocuments.tsx +++ b/src/components/process/processStepOne/SelectedDocuments.tsx @@ -52,8 +52,10 @@ const SelectedDocuments = ({transactionTemplateToggle}) => { const handleUpload = (filesToUpload: File[]) => { const formData = new FormData(); - formData.append("file", filesToUpload[0]) - console.log(formData, "Line 59") + + filesToUpload.forEach(file => { + formData.append("file", file); + }); // filesToUpload.forEach((file) => formData.append("document", file)); dispatch(uploadDocuments({ formData, accountId, transactionId })) diff --git a/src/components/process/processStepOne/SelfSignWarnModal.tsx b/src/components/process/processStepOne/SelfSignWarnModal.tsx index f0dc991..5fd21dc 100644 --- a/src/components/process/processStepOne/SelfSignWarnModal.tsx +++ b/src/components/process/processStepOne/SelfSignWarnModal.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom"; type PropsType = { setShowSelfSignWarnModal: (val: boolean) => void; - onConfirm: () => void; + onConfirm?: () => void; }; const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => { diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index c925f6a..cfcec4e 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -21,6 +21,7 @@ import Loader from '../../dashboard/Loader'; import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils'; import { hideLoader, showLoader } from '../../../store/slices/loaderSlice'; import { IsSendInterface } from './ProcessStepTwo'; +import DroppedItemsTagsCon from './DroppedItemsTagsCon'; export interface DroppedItemsObj { [key: string]: DroppedItem[] @@ -235,7 +236,7 @@ const DocumentContainer: React.FC = ({ transactionSaving return tagsData; }; - const sendTagsToRecipients = async ( + const sendTagsToRecipients = async ( tagsData: Record, accountId: string, transactionId: string @@ -390,31 +391,19 @@ const DocumentContainer: React.FC = ({ transactionSaving // } // } - let updatedTags : any = []; + let updatedTags: any = []; for (const dropPagesId of Object.keys(droppedItems)) { console.log("Dropped Item:", droppedItems[dropPagesId]); updatedTags.push(...droppedItems[dropPagesId]); } - - console.log(updatedTags, "updatedTags") - let tagsData = groupByRecipientId(updatedTags); - await sendTagsToRecipients(tagsData, accountId, transactionId); - - // if (save) { - // if (selectedRecipients.length === 0) return; - // fetchTags(); - // setSelectedTag(null) - // } - + return // SENDING Transaction - START if (!save) { const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" }) - // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" }) - console.log(res, "Check123") dispatch(hideLoader()) } // SENDING Transaction - END @@ -426,16 +415,16 @@ const DocumentContainer: React.FC = ({ transactionSaving }, [isSend]) // Save Tags - END - useEffect(() => { - // setTimeout(() => { - const interval = setInterval(async () => { - // debugger - setTransactionSaving(true) - // handleTransactionProcess(true); - }, 8000) - // }, 8000) - return () => clearInterval(interval); - }, [droppedItems]) + // handleTransactionSaving - START + + // useEffect(() => { + // const interval = setInterval(async () => { + // setTransactionSaving(true) + // }, 8000) + // return () => clearInterval(interval); + // }, [droppedItems]) + + // handleTransactionSaving - END useEffect(() => { if (transactionSaving) { @@ -530,142 +519,18 @@ const DocumentContainer: React.FC = ({ transactionSaving prepData], } - // const dataToSet: DroppedItemsObj = { - // ...droppedItems, - // [key]: [...(droppedItems[key] || []), - // { - // ...prepData, - // radioGroups: dragElemData.label === "radio" ? - // [ - // { - // ...prepData, - // dimensions: { - // ...prepData.dimensions, top: 8, left: 10 - // } - // }, - // { - // ...prepData, dimensions: { - // ...prepData.dimensions, - // top: 8, - // left: 10 - // } - // } - // ] - // : - // [] - // }], - // } - - // if (dragElemData.label === "radio") { - // setDroppedItems(dataToSet); - // } else { - // setDroppedItems(dataToSet); - // } - console.log("data311", dataToSet) setDroppedItems(dataToSet); setDroppedItemsCounter((prev) => prev + 1); setTimeout(() => { const tagIndex = key in droppedItems ? droppedItems[key].length : 0; - handleTagClick(key, tagIndex) + setSelectedTag({ key, tagIndex }) }, 0) }; // HANDLE DROP - END - // HANDLE TAG MOUSE DOWN - START - // Updated handleTagMouseDown function with proper group border positioning - const handleTagMouseDown = (event: React.MouseEvent, key: string, index: number) => { - event.preventDefault(); - let targetContainer = event?.currentTarget?.parentElement?.parentElement; - let targetElement = event?.currentTarget?.parentElement; - - if (!targetContainer || !targetElement) return; - - const containerRect = targetContainer.getBoundingClientRect(); - const elementRect = targetElement.getBoundingClientRect(); - - // Calculate the initial offset (where the mouse was clicked inside the element) - const offsetX = event.clientX - elementRect.left; - const offsetY = event.clientY - elementRect.top; - - const conScrollWidth = targetContainer?.scrollWidth; - const conScrollHeight = targetContainer?.scrollHeight; - - let isGroupAttr = event.currentTarget.hasAttribute("group"); - let groupId = null; - if (isGroupAttr) { - groupId = event.currentTarget.getAttribute("group"); - } - - let groupElements: NodeListOf | null = null; - if (isGroupAttr && groupId) { - groupElements = document.querySelectorAll(`div[group="${groupId}"]`); - // Show initial border position during drag start - handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY); - } - - const handleMouseMove = (event: MouseEvent) => { - // Get new X and Y positions relative to the container - let left = event.clientX - containerRect.left - offsetX; - let top = event.clientY - containerRect.top - offsetY; - - // Restrict movement within container bounds - left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width)); - top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height)); - - // Apply the movement to the element first - setDroppedItems(prevState => ({ - ...prevState, - [key]: Array.isArray(prevState[key]) - ? prevState[key].map((item, i) => - i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item - ) - : [], - })); - - // Update group border position during drag if it's a group element - if (groupElements != null && groupElements.length) { - // Use a small timeout to ensure DOM is updated before recalculating borders - requestAnimationFrame(() => { - handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY); - }); - } - }; - - const handleMouseUp = () => { - // CRITICAL: Ensure group borders are properly positioned after drag ends - if (groupElements != null && groupElements.length && groupId) { - // Multiple approaches to ensure the positioning works: - - // 1. Immediate update - setTimeout(() => { - handleIGroupBorderPosition(groupId); - }, 10); - - // 2. Secondary update to ensure it's properly positioned - setTimeout(() => { - handleIGroupBorderPosition(groupId); - }, 100); - - // 3. Final update using requestAnimationFrame for DOM sync - requestAnimationFrame(() => { - setTimeout(() => { - handleIGroupBorderPosition(groupId); - }, 50); - }); - } - - document.removeEventListener("pointermove", handleMouseMove); - document.removeEventListener("pointerup", handleMouseUp); - }; - - // Add event listeners - document.addEventListener("pointermove", handleMouseMove); - document.addEventListener("pointerup", handleMouseUp); - }; - // HANDLE TAG MOUSE DOWN - END // HANDLE EXPAND TAG - START const handleExpandTag = (event: React.MouseEvent, key: string, index: number) => { @@ -723,99 +588,6 @@ const DocumentContainer: React.FC = ({ transactionSaving }; // HANDLE EXPAND TAG - END - const handleTagClick = (key: string, index: number) => { - setSelectedTag({ key, index }) - } - - // Updated handleRemoveTag function with your existing API logic and group handling - const handleRemoveTag = (key: string, targetIndex: number) => { - const tag = droppedItems[key][targetIndex]; - const recipientId = tag.recipientId; - - (async () => { - if ("id" in tag) { - try { - const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) - if (response.status !== 200) throw "Tag Deletion error" - } catch (err) { - console.error("Tag Deletion error") - return; - } - } - - setSelectedTag(null); - - // Check if this item has a group for special group handling - if ('group' in tag && tag.group) { - const groupId = tag.group; - - // Find all items in the same group - const groupItems = droppedItems[key] - .map((item, idx) => ({ item, index: idx })) - .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted); - - // Sort group items by their top position to identify the parent (top-most) - groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top); - - // Check if the item being removed is the parent (top-most item) - const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex; - - if (isParentItem && groupItems.length > 1) { - // If removing the parent and there are child items, mark all items in the group as deleted - console.log(`Removing parent item and all children for group: ${groupId}`); - - // Get indices of all group items to mark as deleted - const indicesToDelete = groupItems.map(({ index }) => index); - - setDroppedItems(prevState => ({ - ...prevState, - [key]: prevState[key].map((item, index) => - indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item - ) - })); - - // Remove group border elements after state update - setTimeout(() => { - removeGroupBorders(groupId); - }, 100); - - } else { - // If removing a child item or the only item in group, just mark this item as deleted - console.log(`Removing individual item from group: ${groupId}`); - - setDroppedItems(prevState => ({ - ...prevState, - [key]: prevState[key].map((item, index) => - index === targetIndex ? { ...item, isDeleted: true } : item - ) - })); - - // Check if this was the last item in the group after state update - setTimeout(() => { - const remainingGroupItems = droppedItems[key].filter(item => - 'group' in item && item.group === groupId && !item.isDeleted - ); - - if (remainingGroupItems.length === 0) { - // Remove group borders if no items left - removeGroupBorders(groupId); - } else { - // Update group borders for remaining items - handleIGroupBorderPosition(groupId); - } - }, 100); - } - } else { - // Handle non-group item removal (your existing logic) - setDroppedItems(prevState => ({ - ...prevState, - [key]: prevState[key].map((item, index) => - index === targetIndex ? { ...item, isDeleted: true } : item - ) - })); - } - })() - }; // Helper function to remove group border elements from DOM const removeGroupBorders = (groupId: string) => { @@ -1070,99 +842,14 @@ const DocumentContainer: React.FC = ({ transactionSaving className='drop-page-in shadow-md relative' > - {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */} - {droppedItems[key]?.map((item, index) => { - if (item.isDeleted) return; - - const type = item.type.toUpperCase(); - const IconComponent = typeToIconMap[type] || ; - const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId); - return ( - -
handleTagClick(key, 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` - }} - > - - - {/* If Selected Tag Recipient Info- START */} - {selectedTag?.key && selectedTag.key === key && selectedTag.index === index && -
-
-

-

{IconComponent} -

-

{item.label}

- { - e.stopPropagation(); - handleRemoveTag(key, index) - }} className='cursor-pointer' /> -
-
} - {/* If Selected Tag Recipient Info- END */} - - - - - {/* Expand Circle - STARTS */} - {item.type !== "radio" && item.type !== "checkbox" &&
handleExpandTag(e, key, index)} - className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'> -
} - {/* Expand Circle - ENDS */} - - {/* Tag - START */} - { -
handleTagMouseDown(e, key, index)} - className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full' - style={{ background: selectedRecipient[0]?.color }} - > -

- {IconComponent} -

-
- } - {/* Tag - END */} - -
- - <> - { - "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist && - <> -
-
-
-
handleAddGroupItemClicked(key, item)}>
-
-
- - - } - - - - ) - } - - )} - {/* Render only the dropped items for this specific docId and page - ENDS */} + >; + setDroppedItems: React.Dispatch>; +} + +const DroppedItemsTagsCon: React.FC = ({ droppedItems, key, selectedTag, setSelectedTag }) => { + + const handleTagClick = (key: string, index: number) => { + setSelectedTag({ key, index }) + } + + const handleRemoveTag = (key: string, targetIndex: number) => { + const tag = droppedItems[key][targetIndex]; + const recipientId = tag.recipientId; + + (async () => { + if ("id" in tag) { + try { + const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) + if (response.status !== 200) throw "Tag Deletion error" + } catch (err) { + console.error("Tag Deletion error") + return; + } + } + + setSelectedTag(null); + + // Check if this item has a group for special group handling + if ('group' in tag && tag.group) { + const groupId = tag.group; + + // Find all items in the same group + const groupItems = droppedItems[key] + .map((item, idx) => ({ item, index: idx })) + .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted); + + // Sort group items by their top position to identify the parent (top-most) + groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top); + + // Check if the item being removed is the parent (top-most item) + const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex; + + if (isParentItem && groupItems.length > 1) { + // If removing the parent and there are child items, mark all items in the group as deleted + console.log(`Removing parent item and all children for group: ${groupId}`); + + // Get indices of all group items to mark as deleted + const indicesToDelete = groupItems.map(({ index }) => index); + + setDroppedItems(prevState => ({ + ...prevState, + [key]: prevState[key].map((item, index) => + indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item + ) + })); + + // Remove group border elements after state update + setTimeout(() => { + removeGroupBorders(groupId); + }, 100); + + } else { + // If removing a child item or the only item in group, just mark this item as deleted + console.log(`Removing individual item from group: ${groupId}`); + + setDroppedItems(prevState => ({ + ...prevState, + [key]: prevState[key].map((item, index) => + index === targetIndex ? { ...item, isDeleted: true } : item + ) + })); + + // Check if this was the last item in the group after state update + setTimeout(() => { + const remainingGroupItems = droppedItems[key].filter(item => + 'group' in item && item.group === groupId && !item.isDeleted + ); + + if (remainingGroupItems.length === 0) { + // Remove group borders if no items left + removeGroupBorders(groupId); + } else { + // Update group borders for remaining items + handleIGroupBorderPosition(groupId); + } + }, 100); + } + } else { + // Handle non-group item removal (your existing logic) + setDroppedItems(prevState => ({ + ...prevState, + [key]: prevState[key].map((item, index) => + index === targetIndex ? { ...item, isDeleted: true } : item + ) + })); + } + })() + }; + + // HANDLE TAG MOUSE DOWN - START + // Updated handleTagMouseDown function with proper group border positioning + const handleTagMouseDown = (event: React.MouseEvent, key: string, index: number) => { + event.preventDefault(); + + let targetContainer = event?.currentTarget?.parentElement?.parentElement; + let targetElement = event?.currentTarget?.parentElement; + + if (!targetContainer || !targetElement) return; + + const containerRect = targetContainer.getBoundingClientRect(); + const elementRect = targetElement.getBoundingClientRect(); + + // Calculate the initial offset (where the mouse was clicked inside the element) + const offsetX = event.clientX - elementRect.left; + const offsetY = event.clientY - elementRect.top; + + const conScrollWidth = targetContainer?.scrollWidth; + const conScrollHeight = targetContainer?.scrollHeight; + + let isGroupAttr = event.currentTarget.hasAttribute("group"); + let groupId = null; + if (isGroupAttr) { + groupId = event.currentTarget.getAttribute("group"); + } + + let groupElements: NodeListOf | null = null; + if (isGroupAttr && groupId) { + groupElements = document.querySelectorAll(`div[group="${groupId}"]`); + // Show initial border position during drag start + handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY); + } + + let timeOut = null + const handleMouseMove = (event: MouseEvent) => { + // Get new X and Y positions relative to the container + let left = event.clientX - containerRect.left - offsetX; + let top = event.clientY - containerRect.top - offsetY; + + // Restrict movement within container bounds + left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width)); + top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height)); + + // Apply the movement to the element first + setDroppedItems(prevState => ({ + ...prevState, + [key]: Array.isArray(prevState[key]) + ? prevState[key].map((item, i) => + i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item + ) + : [], + })); + // Update group border position during drag if it's a group element + if (groupElements != null && groupElements.length) { + // Use a small timeout to ensure DOM is updated before recalculating borders + requestAnimationFrame(() => { + handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY); + }); + } + }; + + const handleMouseUp = () => { + // CRITICAL: Ensure group borders are properly positioned after drag ends + if (groupElements != null && groupElements.length && groupId) { + // Multiple approaches to ensure the positioning works: + + // 1. Immediate update + setTimeout(() => { + handleIGroupBorderPosition(groupId); + }, 10); + + // 2. Secondary update to ensure it's properly positioned + setTimeout(() => { + handleIGroupBorderPosition(groupId); + }, 100); + + // 3. Final update using requestAnimationFrame for DOM sync + requestAnimationFrame(() => { + setTimeout(() => { + handleIGroupBorderPosition(groupId); + }, 50); + }); + } + + document.removeEventListener("pointermove", handleMouseMove); + document.removeEventListener("pointerup", handleMouseUp); + }; + + // Add event listeners + document.addEventListener("pointermove", handleMouseMove); + document.addEventListener("pointerup", handleMouseUp); + }; + // HANDLE TAG MOUSE DOWN - END + + return ( + <> + {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */} + {droppedItems[key]?.map((item, index) => { + if (item.isDeleted) return; + + const type = item.type.toUpperCase(); + const IconComponent = typeToIconMap[type] || ; + const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId); + return ( + +
handleTagClick(key, 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` + }} + > + + + {/* If Selected Tag Recipient Info- START */} + {selectedTag?.key && selectedTag.key === key && selectedTag.index === index && +
+
+

+

{IconComponent} +

+

{item.label}

+ { + e.stopPropagation(); + handleRemoveTag(key, index) + }} className='cursor-pointer' /> +
+
} + {/* If Selected Tag Recipient Info- END */} + + + + + {/* Expand Circle - STARTS */} + {item.type !== "radio" && item.type !== "checkbox" &&
handleExpandTag(e, key, index)} + className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'> +
} + {/* Expand Circle - ENDS */} + + {/* Tag - START */} + { +
handleTagMouseDown(e, key, index)} + className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full' + style={{ background: selectedRecipient[0]?.color }} + > +

+ {IconComponent} +

+
+ } + {/* Tag - END */} + +
+ + <> + { + "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist && + <> +
+
+
+
handleAddGroupItemClicked(key, item)}> + +
+
+
+ + + } + + + + ) + } + + )} + {/* Render only the dropped items for this specific docId and page - ENDS */} + + ) +} + +export default DroppedItemsTagsCon \ No newline at end of file diff --git a/src/components/process/processStepTwo/LeftSideBar.tsx b/src/components/process/processStepTwo/LeftSideBar.tsx index fc2c669..ee8bc5e 100644 --- a/src/components/process/processStepTwo/LeftSideBar.tsx +++ b/src/components/process/processStepTwo/LeftSideBar.tsx @@ -155,7 +155,7 @@ const LeftSideBar: React.FC = ({ isFields, selectedRecipientIn document.pages != undefined && } diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 9052dc1..89c1a48 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -128,10 +128,10 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField setTimeout(() => { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (isSignSend) { - window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); + // window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); } else { - navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) + // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) } } else { navigate(`/templates`); @@ -169,25 +169,6 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField zoom(Number(indx), 'zoom-con') }, [selFitIndx]) - // useEffect(() => { - // let timeoutId: number; - // const timeOutIn = 8000; - - // const updateLabel = () => { - // if (document.visibilityState === 'visible') { - // setTransactionSaving(true); - // setTimeout(() => { - // setTransactionSaving(false); - // }, 4000) - // } - // timeoutId = setTimeout(updateLabel, timeOutIn); - // }; - // timeoutId = setTimeout(updateLabel, timeOutIn); - - // // Cleanup on unmount - // return () => clearTimeout(timeoutId); - // }, []); - useEffect(() => { if (!transactionSaving) return; @@ -223,16 +204,6 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField

Pages

- {/*
- -

Reset

-
*/} - - {/*
-

Fit

- -
*/} -
setIsFitDd(false)} diff --git a/src/components/process/processStepTwo/rightSideBar/LabelAttr.tsx b/src/components/process/processStepTwo/rightSideBar/LabelAttr.tsx deleted file mode 100644 index f40d219..0000000 --- a/src/components/process/processStepTwo/rightSideBar/LabelAttr.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -interface LabelAttrInt { - label: string; - handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void; -} - -const LabelAttr: React.FC = ({ label, handlePropertyChange }) => { - return ( -
- - handlePropertyChange('label', e.target.value)} - type="text" - className="outline-none border-1 rounded px-2 py-1 border-slate-200" /> -
- ) -} - -export default LabelAttr \ No newline at end of file diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index d919265..23b2c42 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -1,31 +1,23 @@ import { DroppedItemsObj } from "../DocumentContainer"; import React, { useEffect, useState } from "react"; -import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats"; import { DroppedItem, StylesInterface } from "../../../../utlity/types"; import { IoIosArrowDown } from "react-icons/io"; import { TagsTypes } from "../../../../utlity/types"; -import LabelAttr from "./LabelAttr"; -import RequiredAttr from "./RequiredAttr"; -import CurrTimeStampAttr from "./currTimeStampAttr"; -import CommonAttrDropDown from "./CommonAttrDropDown"; -import MaskTypePassAttr from "./MaskTypePassAttr"; -import TemporalDateAttr from "./TemporalDateAttr"; -import SelectTagAttr from "./SelectTagAttr"; -import MaxMinLenAttr from "./MaxMinLenAttr"; -import RecipientsAttrCon from "./RecipientsAttrCon"; -import MovableFieldContainer from "./MovableField"; -import DirectionalControls from "./DirectionalControls"; -import TextValueFIll from "./TextValueFIll"; - -// interface DirectionalControlsProps { -// onMove: (direction: 'up' | 'down' | 'left' | 'right') => void; -// disabled?: boolean; -// stepSize?: number; -// className?: string; -// } +import LabelAttr from "./attributes/LabelAttr"; +import RequiredAttr from "./attributes/RequiredAttr"; +import CommonAttrDropDown from "./attributes/CommonAttrDropDown"; +import MaskTypePassAttr from "./attributes/MaskTypePassAttr"; +import TemporalDateAttr from "./attributes/TemporalDateAttr"; +import SelectTagAttr from "./attributes/SelectTagAttr"; +import MaxMinLenAttr from "./attributes/MaxMinLenAttr"; +import RecipientsAttrCon from "./attributes/RecipientsAttrCon"; +import DirectionalControls from "./attributes/DirectionalControls"; +import TextValueFIll from "./attributes/TextValueFIll"; +import CurrTimeStampAttr from "./attributes/CurrTimeStampAttr"; +import ToolTipAttr from "./attributes/ToolTipAttr"; export interface DroppedItemProps { droppedItems: DroppedItem[] @@ -34,12 +26,6 @@ export interface DroppedItemProps { selTagKey: string, selTagIndx: number, signClient: boolean, - // DirectionalControlsProps: { - // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; - // disabled?: boolean; - // stepSize?: number; - // className?: string; - // } } export enum TEXT { @@ -118,121 +104,6 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => { if (changeTo === '') return - // if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { - - // 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 - - // 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) { - - // let val = timeFormats[0].format; - - // if (is24Hrs === null) { - // val = timeFormats[0].format - // } else if (!is24Hrs) { - // val = timeFormats[1].format - // } else { - // val = timeFormats[0].format - // } - // // console.log("val", val, is24Hrs) - - // // if(is24Hrs === null) { - // // changeWith = changeWith + " " + val; - // // } - - - // 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 { - - // if (!signClient) { - // setDroppedItems((prev) => { - - // const updatedItems = Array.isArray(prev[selTagKey]) - // ? prev[selTagKey].map((item, i) => - // i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item - // ) - // : []; - - // return { - // ...prev, - // [selTagKey]: updatedItems, - // }; - // }); - // } else { - // setDroppedItems((prev) => { - // const updated = [...prev]; - // updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true } - // return updated; - // }) - // } - - // } - if (!signClient) { setDroppedItems((prev) => { @@ -266,22 +137,6 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s setDropDownToggle(null) } - // useEffect(() => { - // if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) { - - // if (selectedTag.dateFormat === TEMPORAL.DATE) { - // handlePropertyChange("format", dateFormats[0].format) - // } - // else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) { - // handlePropertyChange("format", dateTimeFormats[0].format) - // } - // else if (selectedTag.dateFormat === TEMPORAL.TIME) { - // handlePropertyChange("format", timeFormats[0].format) - // } - // } - // }, [selectedTag.dateFormat]) - - useEffect(() => { if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) { handlePropertyChange("dateFormat", TEMPORAL.DATE); @@ -305,24 +160,6 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s setDecimalPlace(selectedTag.decimalPlace ?? 0) }, [selectedTag.decimalPlace ?? 0]) - // useEffect(() => { - // if ("styles" in selectedTag) { - // console.log("styles" in selectedTag) - // const fontSize = selectedTag?.styles?.textSize; - // const tagHeight = selectedTag?.dimensions?.height - 18; - - // console.log(fontSize) - - // if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.PARAGRAPH && tagHeight > (fontSize + fontSize)) { - // handlePropertyChange("subType", TEXT.PARAGRAPH) - // } else if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.SINGLE_LINE && tagHeight <= (fontSize + fontSize)) { - // console.log("Change subType Called from elseif") - // handlePropertyChange("subType", TEXT.SINGLE_LINE) - // } - // } - // }, [selectedTag]) - - useEffect(() => { if (!selectedTag) return; @@ -333,26 +170,6 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s setStyles({ ...defaultStyles, ...selectedTag.styles }); } - // Optional subType logic - - // const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize; - // const tagHeight = selectedTag?.dimensions?.height - 18; - - // if ( - // selectedTag.type === TagsTypes.TEXT && - // selectedTag.subType !== TEXT.PASSWORD && - // selectedTag.subType !== TEXT.PARAGRAPH && - // tagHeight > fontSize * 2 - // ) { - // handlePropertyChange("subType", TEXT.PARAGRAPH); - // } else if ( - // selectedTag.subType !== TEXT.PASSWORD && - // selectedTag.subType !== TEXT.SINGLE_LINE && - // tagHeight <= fontSize * 2 - // ) { - // handlePropertyChange("subType", TEXT.SINGLE_LINE); - // } - }, [selectedTag]); const handleStyleChange = (key, value) => { @@ -472,28 +289,22 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s <> {/* Right Side Bar Start */}
-

Properties

+

{selectedTag.type.toLowerCase()} Attributes:

- { - - } - + - {selectedTag.label && } - {(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) && - - <> - - - + + { + (selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) && + } {selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL && @@ -575,9 +386,6 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s } - - - {(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
= ({
- {/* Bottom */} - {/* Middle Row: Left - Center (Inputs) - Right */}
- {/* Left Button */} - {/*
- - Left -
*/} - - {/* Center Panel */}
- {/* Floating dimensions tooltip */} - {/*
- handlePositionInputChange('left', e.target.value)} - onBlur={() => handlePositionInputBlur('left')} - onKeyPress={(e) => handleKeyPress(e, 'left')} - disabled={disabled} - className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono" - /> - × - handlePositionInputChange('top', e.target.value)} - onBlur={() => handlePositionInputBlur('top')} - onKeyPress={(e) => handleKeyPress(e, 'top')} - disabled={disabled} - className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono" - /> -
*/}
- - - {/* Right Button */} - {/*
- - Right -
*/}
- - {/* Bottom Button */} - {/*
-
- - Bottom -
-
*/}
); }; diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/LabelAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/LabelAttr.tsx new file mode 100644 index 0000000..947ba60 --- /dev/null +++ b/src/components/process/processStepTwo/rightSideBar/attributes/LabelAttr.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +interface LabelAttrInt { + label: string; + handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void; +} + +const LabelAttr: React.FC = ({ label, handlePropertyChange }) => { + return ( + <> +
+ + handlePropertyChange('label', e.target.value)} + type="text" + className="outline-none border-1 rounded px-2 py-1 border-slate-200" /> +
+ + ) +} + +export default LabelAttr \ No newline at end of file diff --git a/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx similarity index 97% rename from src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx index 4114f16..1008f52 100644 --- a/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx @@ -1,5 +1,5 @@ import { MdKeyboardArrowDown } from "react-icons/md"; -import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "./RightSideBar"; +import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "../RightSideBar"; import { LuAsterisk } from "react-icons/lu"; import { GoDotFill } from "react-icons/go"; import { IoClose } from "react-icons/io5"; diff --git a/src/components/process/processStepTwo/rightSideBar/MaxMinLenAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx similarity index 100% rename from src/components/process/processStepTwo/rightSideBar/MaxMinLenAttr.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx diff --git a/src/components/process/processStepTwo/rightSideBar/RecipientsAttrCon.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx similarity index 96% rename from src/components/process/processStepTwo/rightSideBar/RecipientsAttrCon.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx index 62185fe..9d5a04e 100644 --- a/src/components/process/processStepTwo/rightSideBar/RecipientsAttrCon.tsx +++ b/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx @@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react' import { IoCheckmark } from 'react-icons/io5'; import { MdKeyboardArrowDown } from 'react-icons/md'; import { useSelector } from 'react-redux'; -import { RootState } from '../../../../store/store'; -import { recipientType } from '../../../../store/slices/selectedRecipientsSlice'; +import { RootState } from '../../../../../store/store'; +import { recipientType } from '../../../../../store/slices/selectedRecipientsSlice'; interface SelectedRecipientsIntr { diff --git a/src/components/process/processStepTwo/rightSideBar/RequiredAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/RequiredAttr.tsx similarity index 100% rename from src/components/process/processStepTwo/rightSideBar/RequiredAttr.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/RequiredAttr.tsx diff --git a/src/components/process/processStepTwo/rightSideBar/SelectTagAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx similarity index 100% rename from src/components/process/processStepTwo/rightSideBar/SelectTagAttr.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx diff --git a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx similarity index 95% rename from src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx index 69a3ab7..4265d85 100644 --- a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from "react"; -import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats"; -import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar"; +import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../../utlity/dateTimeFormats"; +import { DROPDOWNTOGGLE, TEMPORAL } from "../RightSideBar"; import { MdKeyboardArrowDown } from "react-icons/md"; import dayjs from "dayjs"; -import { DroppedItem } from "../../../../utlity/types"; +import { DroppedItem } from "../../../../../utlity/types"; const dateTimeFormatMap = { "date": dateFormats, diff --git a/src/components/process/processStepTwo/rightSideBar/TextValueFIll.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/TextValueFIll.tsx similarity index 100% rename from src/components/process/processStepTwo/rightSideBar/TextValueFIll.tsx rename to src/components/process/processStepTwo/rightSideBar/attributes/TextValueFIll.tsx diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/ToolTipAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/ToolTipAttr.tsx new file mode 100644 index 0000000..48d7e6a --- /dev/null +++ b/src/components/process/processStepTwo/rightSideBar/attributes/ToolTipAttr.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +interface ToolTipAttrInt { + tooltip: string; + handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void; +} + +const ToolTipAttr: React.FC = ({ tooltip, handlePropertyChange }) => { + return ( + <> +
+ + handlePropertyChange('tooltip', e.target.value)} + type="text" + className="outline-none border-1 rounded px-2 py-1 border-slate-200" /> +
+ + ) +} + +export default ToolTipAttr \ No newline at end of file diff --git a/src/store/slices/documentSlice.ts b/src/store/slices/documentSlice.ts index 51fca6b..29c7ccd 100644 --- a/src/store/slices/documentSlice.ts +++ b/src/store/slices/documentSlice.ts @@ -81,18 +81,29 @@ export const uploadDocuments = createAsyncThunk< }; const toggle = state.selectedRecipients.transactionTemplateToggle; - const response = await api.post( - `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`, - formData, - { - headers: { - 'Content-Type': 'multipart/form-data', - }, - } - ); + let response = []; + // debugger + for (let i = 0; i < formData.getAll("file").length; i++) { + const file = new FormData(); + file.append("file", formData.getAll("file")[i]); + + const res = await api.post( + `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`, + file, + { + headers: { + 'Content-Type': 'multipart/form-data', + }, + } + ); + + console.log(res.data); + response.push(res.data); + } + // await sleep(5000); dispatch(hideLoader()); - return [response.data]; + return [...response]; } catch (error: any) { dispatch(hideLoader()); @@ -160,7 +171,9 @@ const documentsSlice = createSlice({ }) .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction) => { state.loading = false; - state.documents.push(...action.payload); + action.payload.forEach((doc, indx) => { + state.documents.push(doc); + }); }) .addCase(uploadDocuments.rejected, (state, action) => { state.loading = false; diff --git a/src/store/slices/selectedRecipientsSlice.tsx b/src/store/slices/selectedRecipientsSlice.tsx index 4a26f10..b92effa 100644 --- a/src/store/slices/selectedRecipientsSlice.tsx +++ b/src/store/slices/selectedRecipientsSlice.tsx @@ -1,335 +1,3 @@ -// import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -// import { createAsyncThunk } from '@reduxjs/toolkit'; -// import { toast } from 'react-toastify'; -// import colors from '../../utlity/colorsArr'; -// import api from '../../config/api'; - - - -// export enum recipientType { -// SIGNER = "Signer", -// INPERSONSIGNER = "InPersonSigner", -// CC = "CC" -// } - -// export interface Recipient { -// id?: string; -// firstName: string; -// lastName: string; -// routingOrder: number; -// email: string; -// hostName: string; -// hostEmail: string; -// type: recipientType; -// color?: string; -// } - -// export interface SelectedRecipientInt { -// recipients: Recipient[], -// signingOrder: boolean, -// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE -// } - -// interface AddRecipientArgs { -// recipientsData: Recipient[]; -// accountId: string; -// transactionId: string; -// } - -// export enum TRANSACTION_TEMPLATE_TOGGLE { -// TRANSACTIONS = "transactions", -// TEMPLATES = "templates" -// } - -// const initialState: SelectedRecipientInt = { -// recipients: [], -// signingOrder: false, -// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS -// }; - -// export const addRecipientAsync = createAsyncThunk( -// 'selectedRecipients/addRecipientAsync', -// async ({ recipientsData, accountId, transactionId }, { rejectWithValue }) => { -// console.log(recipientsData, accountId, transactionId, "recipientsData Line 46"); -// try { -// console.log(recipientsData, "recipientsData --- Line 48"); - -// const updateRecipientsData = recipientsData.filter((recipient, idx) => recipient.id !== null); -// const createRecipientsData = recipientsData.filter((recipient, idx) => recipient.id == null); - -// console.log(updateRecipientsData, "updateRecipientsData Line 52"); -// console.log(createRecipientsData, "createRecipientsData Line 53"); - -// const resUpdate = await api.put( -// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`, -// updateRecipientsData -// ); - -// const resCreate = await api.post( -// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`, -// createRecipientsData -// ); - -// if (createRecipientsData.length === 0) resCreate.data = []; -// if (updateRecipientsData.length === 0) resUpdate.data = []; - -// console.log(resCreate, "resCreate"); -// console.log(resUpdate, "resUpdate"); - -// return [...resCreate.data, ...resUpdate.data] as Recipient[]; -// } catch (err: any) { -// return rejectWithValue(err.response?.data || "Failed to add recipient"); -// } -// } -// ); - -// interface RemoveRecipientAsyncInterfaceObj { -// id?: string; -// email?: string; -// } - -// interface RemoveRecipientAsyncInterface { -// recipientId: number | null; -// accountId: string; -// transactionId: string; -// email: string; -// } - -// export const removeRecipientAsync = createAsyncThunk( -// 'selectedRecipients/removeRecipientAsync', -// async (obj, { rejectWithValue }) => { -// try { -// if (obj.recipientId) { -// const res = await api.delete(`/api/accounts/${obj.accountId}/transactions/${obj.transactionId}/recipients/${obj.recipientId}`); -// console.log(res, "Line 77") -// return obj.recipientId; -// } -// return obj.email -// } catch (err: any) { -// return rejectWithValue("Failed to remove recipient"); -// } -// } -// ); - -// export const fetchRecipients = createAsyncThunk( -// 'selectedRecipients/fetchRecipients', -// async ({ accountId, transactionId }, { rejectWithValue }) => { -// try { -// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`); -// return response.data as Recipient[]; -// } catch (err: any) { -// return rejectWithValue(err.response?.data || "Failed to fetch recipients"); -// } -// } -// ); - -// const selectedRecipientsSlice = createSlice({ -// name: 'selectedRecipients', -// initialState, -// reducers: { -// // Add a single recipient -// addRecipient: (state, action: PayloadAction) => { -// for (const recipient of state.recipients) { -// if (recipient.email === action.payload.email) { -// toast.dismiss(); -// toast.error("Email already exists !", { -// position: "bottom-right", -// autoClose: 5000, -// hideProgressBar: false, -// closeOnClick: false, -// pauseOnHover: true, -// draggable: true, -// progress: undefined, -// theme: "light", -// }); -// return state; -// } -// } - -// // Adding Recipient on top if type is inPersonSigner -// console.log("Getting Type ", action.payload.type) -// if (action.payload.type === recipientType.INPERSONSIGNER) { -// state.signingOrder = true -// state.recipients = [action.payload, ...state.recipients] -// } else { -// state.recipients.push(action.payload); -// } - -// }, -// resetRecipients: (state) => { -// state.recipients = []; -// }, -// toggleToTemplates: (state) => { -// state.transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES; -// }, -// // Replace the entire selectedRecipients array -// setSelectedRecipients: (state, action: PayloadAction) => { -// for (const [index, recipient] of action.payload.entries()) { -// if ((recipient.type === recipientType.INPERSONSIGNER && index > 0) && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) { -// return state; -// } -// } - -// state.recipients = action.payload; -// }, -// setSigningOrder: (state, action: PayloadAction) => { - -// for (const recipient of state.recipients) { -// if (recipient.type === recipientType.INPERSONSIGNER) { -// if (state.signingOrder) return state; -// state.signingOrder = true; -// return state -// } -// } - -// state.signingOrder = action.payload; -// }, -// // Remove Recipients -// removeSelectedRecipient: (state, action: PayloadAction) => { -// console.log("removeSelectedRecipient Called") -// state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email); -// }, - -// // Add Color in Recipient -// addColorsToRecipient: (state) => { -// // const colors = generateUniqueColors(state.recipients.length); -// for (const [index, recipient] of state.recipients.entries()) { -// console.log(state) -// recipient.color = colors[index] -// } -// return state; -// }, -// updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => { -// console.log("recipient order called Line 159") -// const { id, routingOrder } = action.payload; -// const recipient = state.recipients.find((r) => r.id === id || r.email === id); -// if (recipient) { -// recipient.routingOrder = routingOrder; -// } -// }, -// updateRecipientIds: (state, action: PayloadAction) => { -// console.log("updateRecipientIds", console.table(action.payload)); -// for (const recObj of state.recipients) { -// const email = recObj.email -// for (const recObj2 of action.payload) { -// recObj.id = recObj2.id; -// } -// } -// }, -// resetSelRecipient: (state) => { -// state = initialState; -// return state; -// } -// }, -// extraReducers: (builder) => { -// builder -// // Fetch Recipient - START -// .addCase(fetchRecipients.pending, (state) => { -// }) -// .addCase(fetchRecipients.fulfilled, (state, action: PayloadAction) => { -// // console.log("Fetched recipients successfully:", action.payload); - -// // Assign colors to recipients -// const assignedRecipients = action.payload.map((recipient, index) => ({ -// ...recipient, -// color: colors[index], // Cycle if more recipients than colors -// })); - -// state.recipients = assignedRecipients; -// }) -// .addCase(fetchRecipients.rejected, (state, action) => { -// console.error("Failed to fetch recipients:", action.payload); -// toast.error("Failed to fetch recipients", { -// position: "bottom-right", -// autoClose: 5000, -// hideProgressBar: false, -// closeOnClick: false, -// pauseOnHover: true, -// draggable: true, -// progress: undefined, -// theme: "light", -// }); -// }) -// // Fetch Recipient - END - -// // Add Recipient - START -// .addCase(addRecipientAsync.pending, (state) => { - -// }) - - -// .addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction) => { -// // Optionally avoid duplicates if needed - -// console.log("addRecipientAsync Called Line 258", action.payload); -// // const newRecipients = action.payload.filter(newRec => { -// // return !state.recipients.some(existing => existing existing.id === newRec.id); -// // }); - -// // const newRecipients = action.payload.filter(newRec => { -// // return !state.recipients.some(existing => "id" in existing && existing.id === newRec.id); -// // }); - -// // // Add new recipients and assign colors -// // const startIndex = state.recipients.length; -// // newRecipients.forEach((rec, index) => { -// // rec.color = colors[startIndex + index]; -// // state.recipients.push(rec); -// // }); - -// state.recipients = action.payload.map((recipient, index) => ({ -// ...recipient, -// color: colors[index % colors.length], // Cycle through colors -// })); - -// }) - - -// .addCase(addRecipientAsync.rejected, (state, action) => { -// console.error("Failed to fetch recipients:", action.payload); -// toast.error("Failed to fetch recipients", { -// position: "bottom-right", -// autoClose: 5000, -// hideProgressBar: false, -// closeOnClick: false, -// pauseOnHover: true, -// draggable: true, -// progress: undefined, -// theme: "light", -// }); -// }) -// // Add Recipient - END - -// // Fetch Recipient - START -// .addCase(removeRecipientAsync.pending, (state) => { -// }) -// .addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction) => { -// state.recipients = state.recipients.filter( -// (recipient) => recipient.id !== action.payload && recipient.email !== action.payload -// ); -// }) -// .addCase(removeRecipientAsync.rejected, (state, action) => { -// console.error("Failed to Delete recipients:", action.payload); -// toast.error("Failed to Delete recipients", { -// position: "bottom-right", -// autoClose: 5000, -// hideProgressBar: false, -// closeOnClick: false, -// pauseOnHover: true, -// draggable: true, -// progress: undefined, -// theme: "light", -// }); -// }) -// // Fetch Recipient - END -// } -// }); - -// export const { addRecipient, setSelectedRecipients, toggleToTemplates, removeSelectedRecipient, setSigningOrder, addColorsToRecipient, updateRecipientIds, resetSelRecipient, updateRecipientOrder, resetRecipients } = selectedRecipientsSlice.actions; -// export default selectedRecipientsSlice.reducer; - - - import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'; import { toast } from 'react-toastify'; import colors from '../../utlity/colorsArr'; @@ -342,7 +10,7 @@ export enum recipientType { } export interface Recipient { - id?: string; + id?: string | null; firstName: string; lastName: string; routingOrder: number; @@ -356,7 +24,7 @@ export interface Recipient { roleName: string provideOwnTags?: boolean; uuid?: string; - newOne: boolean; + newOne?: boolean; } export interface SelectedRecipientInt { @@ -467,7 +135,7 @@ export const fetchRecipients = createAsyncThunk< // data = data.filter((recipient, indx) => { // return recipient.type !== "CC"; // }) - + if (data.length === 0 && window.location.pathname.includes('/process-step-two')) { window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window } @@ -484,21 +152,6 @@ const selectedRecipientsSlice = createSlice({ initialState, reducers: { addRecipient: (state, action: PayloadAction) => { - - // Checking if meail already exist - START - // for (const recipient of state.recipients) { - // if (recipient.email === action.payload.email) { - // toast.dismiss(); - // toast.error("Email already exists !", { - // position: "bottom-right", - // autoClose: 5000, - // theme: "light", - // }); - // return state; - // } - // } - // Checking if meail already exist - END - if (action.payload.type === recipientType.INPERSONSIGNER) { state.signingOrder = true; state.recipients = [action.payload, ...state.recipients]; diff --git a/src/utlity/types.tsx b/src/utlity/types.tsx index 4cf385f..eb80ee8 100644 --- a/src/utlity/types.tsx +++ b/src/utlity/types.tsx @@ -100,7 +100,6 @@ export interface TagsProperties { "isCurrency"?: boolean; } - export enum TagsTypes { TEXT = "text", SIGNATURE = "signature", @@ -119,15 +118,11 @@ export enum TagsTypes { COMPANY = "company", } - export enum SignTypeEnum { selfSign = "self_sign", multipleSign = "multi_sign" } - - - export interface StylesInterface { font: string, italic: boolean, @@ -151,6 +146,7 @@ export interface DroppedItem { id?: string; icon: JSX.Element; label?: string; + tooltip?: string; type: string; // TagsProperties - Other Properties depend on tag type - START