From 19abe70a647bec6d09d1ee6ffc89f629b8298b07 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Thu, 31 Jul 2025 12:25:44 +0530 Subject: [PATCH] a --- .../DocumentCompletionScreen.tsx | 2 +- .../process/processStepOne/ProcessStepOne.tsx | 42 ++++++++++++------- .../processStepOne/RecipientAddCard.tsx | 40 ++++++++++-------- .../processStepTwo/DocumentContainer.tsx | 7 +--- .../process/processStepTwo/NavTwo.tsx | 22 +++++++++- .../rightSideBar/DirectionalControls.tsx | 16 +++---- src/components/templates/Templates.tsx | 14 +++---- .../transactions/TransactionView.tsx | 2 +- src/store/slices/documentSlice.ts | 8 +++- src/store/slices/selectedRecipientsSlice.tsx | 33 +++++++++------ src/utlity/JoyRideTour.tsx | 6 +++ 11 files changed, 122 insertions(+), 70 deletions(-) diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx index 706c76e..aae9504 100644 --- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx +++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx @@ -48,7 +48,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { {signers.map((signer) => (
- {signer.name.split(" ").map(n => n[0].toUpperCase()).join("")} + {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
{signer.name}
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index 4c1b9ea..a6eda9b 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/src/components/process/processStepOne/ProcessStepOne.tsx @@ -75,19 +75,19 @@ const ProcessStepOne = () => { console.log("Error - transactions details") } })() - // Fetching Transaction Details - END + // Fetching Transaction Details - END - // ======= - // (async () => { - // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) - // console.log(res.data); - // })() - // >>>>>>> origin/main + // ======= + // (async () => { + // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) + // console.log(res.data); + // })() + // >>>>>>> origin/main - // (async () => { - // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) - // console.log(res.data); - // })() + // (async () => { + // const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) + // console.log(res.data); + // })() selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId })); selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId })); @@ -104,7 +104,7 @@ const ProcessStepOne = () => { const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); - const handleNextClick = async (isSendNow: boolean) => { + const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => { let formError = { documents: false, recipients: false, @@ -250,7 +250,11 @@ const ProcessStepOne = () => { dispatch(hideLoader()); if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { console.log(`/process-step-two/${accountId}/template/${transactionId}`) - navigate(`/process-step-two/${accountId}/template/${transactionId}`) + if(!saveAndClose) { + navigate(`/process-step-two/${accountId}/template/${transactionId}`) + } else { + navigate(`/templates`) + } } else { if (signType === SignTypeEnum.selfSign) { (async () => { @@ -319,12 +323,22 @@ const ProcessStepOne = () => {
+ + + {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && } + +
diff --git a/src/components/process/processStepOne/RecipientAddCard.tsx b/src/components/process/processStepOne/RecipientAddCard.tsx index aad1488..c260f59 100644 --- a/src/components/process/processStepOne/RecipientAddCard.tsx +++ b/src/components/process/processStepOne/RecipientAddCard.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { FaPlus } from "react-icons/fa"; -import { addRecipient, Recipient, recipientType, updateRecipient } from "../../../store/slices/selectedRecipientsSlice"; +import { addRecipient, Recipient, recipientType, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice"; import { useDispatch } from "react-redux"; import { AppDispatch } from "../../../store/store"; import api from "../../../config/api"; @@ -36,7 +36,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, const dispatch = useDispatch(); const formRef = useRef(null); - const [recipient, setRecipients] = useState({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false }); + const [recipient, setRecipients] = useState({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true }); const [showAdvanceSettings, setShowAdvanceSettings] = useState(false) @@ -72,8 +72,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, hostEmail: editRecipient.hostEmail || "", roleName: editRecipient.roleName || "", type: editRecipient.type || recipientType.SIGNER, - allowSenderToEdit: editRecipient.allowSenderToEdit ?? false, - allowSenderToDelete: editRecipient.allowSenderToDelete ?? false, + allowSenderToEdit: editRecipient.allowSenderToEdit ?? true, + allowSenderToDelete: editRecipient.allowSenderToDelete ?? true, uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''), newOne: editRecipient.newOne ?? false }); @@ -86,15 +86,19 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, console.log("recipientrecipient", recipient) - if (!recipient.lastName || !recipient.email || !recipient.type) return; + if(transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { + if (!recipient.lastName || !recipient.email || !recipient.type) return; + + // ✅ Email format validation + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(recipient.email)) { + console.log("Invalid email format"); + return; + } - // ✅ Email format validation - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailRegex.test(recipient.email)) { - console.log("Invalid email format"); - return; } + if (editCase === 'Edit') { dispatch(updateRecipient(recipient)); } else { @@ -113,8 +117,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, hostEmail: "", roleName: "", type: recipientType.SIGNER, - allowSenderToEdit: false, - allowSenderToDelete: false, + allowSenderToEdit: true, + allowSenderToDelete: true, uuid: "", newOne: false }); @@ -275,13 +279,13 @@ useEffect(() => { id="add-recipient-step-one" className="w-full bg-white border border-gray-200 rounded-lg shadow-md px-6 py-4 space-y-3 relative" > - {transactionTemplateToggle === 'templates' && ( + {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
{/* Top Row: Role Input + Settings */}
{/* Role Name Input */} setOpenContactModal(true)} onBlur={handleContactModalBlur} @@ -413,7 +417,7 @@ useEffect(() => { onChange={(e) => setRecipients({ ...recipient, firstName: e.target.value })} /> handleFocus("lastName")} onBlur={handleContactModalBlur} @@ -423,7 +427,7 @@ useEffect(() => { onChange={(e) => setRecipients({ ...recipient, lastName: e.target.value })} /> handleFocus("email")} onBlur={handleContactModalBlur} @@ -437,7 +441,7 @@ useEffect(() => { {recipient.type === recipientType.INPERSONSIGNER &&
setOpenContactModal(true)} onBlur={handleContactModalBlur} @@ -447,7 +451,7 @@ useEffect(() => { onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })} /> setOpenContactModal(true)} onBlur={handleContactModalBlur} diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index 1947b07..2284e4d 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -65,13 +65,8 @@ const DocumentContainer: React.FC = ({ isSend }) => { const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients); // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments) const selectedDocuments = useSelector((state: RootState) => state.documents.documents) - - console.log("selectedDocuments", selectedDocuments) - + const [droppedItems, setDroppedItems] = useState({}); - console.log("droppedItems", droppedItems) - - // const [uniqGroupIds, setUniqGroupIds] = useState([]); useEffect(() => { diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 1602604..524e258 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -11,6 +11,7 @@ import { RiResetLeftLine, RiResetRightLine } from 'react-icons/ri' import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice' import { fetchDocuments } from '../../../store/slices/documentSlice' import { useNavigate, useParams } from 'react-router-dom' +import { Bounce, toast } from 'react-toastify' interface NavTwoProps { isFields: boolean; @@ -85,7 +86,22 @@ const NavTwo: React.FC = ({ isFields, setIsFields, isSend, setIsSen setIsSend(false); } setIsSend(!isSend) - navigate(`/document-completion-screen/${accountId}/${transactionId}`) + if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { + navigate(`/document-completion-screen/${accountId}/${transactionId}`) + } else { + navigate(`/templates`); + toast.success("Template Saved...!", { + position: "top-center", + autoClose: 1500, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "light", + transition: Bounce, + }); + } } const handleSetIsFields = (setTo: boolean) => { @@ -265,7 +281,9 @@ const NavTwo: React.FC = ({ isFields, setIsFields, isSend, setIsSen id='send-sign-dash-btn' onClick={() => handleSend()} className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'> -

Send

+

+ {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "Save" : "Send"} +

diff --git a/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx b/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx index 25c08a5..d304a3f 100644 --- a/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx +++ b/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx @@ -152,7 +152,7 @@ const DirectionalControls: React.FC = ({ {/* Middle Row: Left - Center (Inputs) - Right */}
{/* Left Button */} -
+ {/*
Left -
+
*/} {/* Center Panel */}
{/* Floating dimensions tooltip */} -
+ {/*
= ({ 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/templates/Templates.tsx b/src/components/templates/Templates.tsx index a75a6e6..2d1bba3 100644 --- a/src/components/templates/Templates.tsx +++ b/src/components/templates/Templates.tsx @@ -40,7 +40,7 @@ const Templates = () => { const getAllTemplates = async () => { setLoading(true) try { - let res = await api.get(`/api/accounts/${activeAccountId}/templates`) + let res = await api.get(`/api/accounts/${activeAccountId}/templates?sortBy=lastModifiedAt desc`) let templateData = res?.data setTemplates(templateData) } catch (error) { @@ -84,7 +84,10 @@ const Templates = () => { } } - + const handleEditClick = (templateId: string) => { + setShowMenu(null); + navigate(`/process-step-one/${accountId}/template/${templateId}`); + } return (
@@ -146,7 +149,7 @@ const Templates = () => { {/* */}
- {item.name || 'Dummy'} + {item.name || 'Untitled'} {formatDate(item.createdAt)} {formatDate(item.lastModifiedAt)} handleUseClick(item)}>Use @@ -172,10 +175,7 @@ const Templates = () => { > diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx index b97dc0c..164cb3e 100644 --- a/src/components/transactions/TransactionView.tsx +++ b/src/components/transactions/TransactionView.tsx @@ -135,7 +135,7 @@ const TransactionView = () => {

{recipient.status}

- {recipient.email === user.email && + {recipient.email === user.email && recipient.status !== "COMPLETED" &&

handleNavigateToSign(recipient.id)} className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'> diff --git a/src/store/slices/documentSlice.ts b/src/store/slices/documentSlice.ts index cd011c3..06bfa79 100644 --- a/src/store/slices/documentSlice.ts +++ b/src/store/slices/documentSlice.ts @@ -213,7 +213,13 @@ export const fetchDocuments = createAsyncThunk< `/api/accounts/${accountId}/${toggle}/${transactionId}/documents?include_images=true` ); - return response.data as Document[]; + const data = response.data as Document[]; + + 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 + } + + return data; } catch (error: any) { return rejectWithValue(error.response?.data || 'Failed to fetch documents'); } diff --git a/src/store/slices/selectedRecipientsSlice.tsx b/src/store/slices/selectedRecipientsSlice.tsx index 217b7d5..f7a3d02 100644 --- a/src/store/slices/selectedRecipientsSlice.tsx +++ b/src/store/slices/selectedRecipientsSlice.tsx @@ -463,7 +463,13 @@ export const fetchRecipients = createAsyncThunk< const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`; const response = await api.get(basePath); - return response.data as Recipient[]; + const data = response.data as Recipient[]; + + 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 + } + + return data as Recipient[]; } catch (err: any) { return rejectWithValue(err.response?.data || "Failed to fetch recipients"); } @@ -475,17 +481,20 @@ const selectedRecipientsSlice = createSlice({ initialState, reducers: { 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, - theme: "light", - }); - return state; - } - } + + // 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; diff --git a/src/utlity/JoyRideTour.tsx b/src/utlity/JoyRideTour.tsx index b564cc6..685f167 100644 --- a/src/utlity/JoyRideTour.tsx +++ b/src/utlity/JoyRideTour.tsx @@ -200,6 +200,12 @@ const JoyrideController = () => { } }; + if(window.location.href.includes("template")) { + return (<>) + } else { + return (<>) + } + return (