BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

checkbox , temporal , radio

This commit is contained in:
JaiPandey425 2025-07-24 13:19:51 +05:30
parent 092b7cc0ca 7b448558c0
commit f6d3f39472
16 changed files with 258 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -54,6 +54,12 @@ const App = () => {
</ProtectedRoute> </ProtectedRoute>
} /> } />
<Route path="/process-step-one/:accountId/:transactionId/:signType" element={
<ProtectedRoute>
<ProcessStepOne />
</ProtectedRoute>
} />
<Route path="/process-step-one/:accountId/template/:templateId" element={ <Route path="/process-step-one/:accountId/template/:templateId" element={
<ProtectedRoute> <ProtectedRoute>
<ProcessStepOne /> <ProcessStepOne />

6
src/components/client/DocumentPages.tsx
View File

@ -23,10 +23,10 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)} onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}> className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
{ {
document.images != undefined && <img document.pages != undefined && <img
key={indx} key={indx}
className='rounded-sm shadow' className='rounded-sm shadow'
src={document.images[0].src} src={document.pages[0].src}
alt="" /> alt="" />
} }
@ -41,7 +41,7 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
{ {
dropDownTogglePage === 'pageDropDown' + indx && dropDownTogglePage === 'pageDropDown' + indx &&
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'> <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
{document.images != undefined && document.images.map((img, indx) => ( {document.pages != undefined && document.pages.map((img, indx) => (
<a <a
href={"#" + document.documentId + indx} href={"#" + document.documentId + indx}
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300' className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'

35
src/components/client/SignDocument.tsx
View File

@ -47,7 +47,7 @@ interface RecipientType {
acceptedTerms: boolean; acceptedTerms: boolean;
name: string | null; name: string | null;
} }
interface ImagesType { interface pagesType {
index: number; index: number;
type: string; type: string;
src: string; src: string;
@ -56,7 +56,7 @@ interface ImagesType {
} }
interface DocumentType { interface DocumentType {
documentId: string; documentId: string;
images: ImagesType[]; pages: pagesType[];
name: string; name: string;
} }
@ -130,7 +130,7 @@ const fitObj = [
// Functions - LIST // Functions - LIST
// handleSignClick - Handle when sign || Initial tag got clicked // handleSignClick - Handle when sign || Initial tag got clicked
// fetchData - Fetch document images and tags data // fetchData - Fetch document pages and tags data
// handleFormSubmit - handle form submit and send data to server // handleFormSubmit - handle form submit and send data to server
const SignDocument = () => { const SignDocument = () => {
@ -525,18 +525,19 @@ const SignDocument = () => {
return null; return null;
} }
useEffect(() => { // useEffect(() => {
(async () => { // (async () => {
if (droppedItems) { // if (droppedItems) {
for (const tag of droppedItems) { // for (const tag of droppedItems) {
if (tag.type === "SIGNATURE" && "value" in tag) { // if (tag.type === "SIGNATURE" && "value" in tag) {
const signatureData = await fetchSignatureData(tag.value); // console.log(tag, "line 533")
console.log("Currnet Signature",signatureData); // const signatureData = await fetchSignatureData(tag["value"]);
} // console.log("Currnet Signature",signatureData);
} // }
} // }
})() // }
}, [droppedItems]) // })()
// }, [droppedItems])
const handleTagUpdate = (updateIndx: number, updateValue: string) => { const handleTagUpdate = (updateIndx: number, updateValue: string) => {
@ -890,7 +891,7 @@ const SignDocument = () => {
<div className='flex flex-col gap-3 max-w-max relative left-[50%] translate-x-[-50%]'> <div className='flex flex-col gap-3 max-w-max relative left-[50%] translate-x-[-50%]'>
{ {
doc.images && doc.images.length > 0 && doc.images.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
console.log(droppedItems, "line 820") console.log(droppedItems, "line 820")
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
@ -1222,7 +1223,7 @@ const SignDocument = () => {
{/* Side details of documents Pages and document Name - START */} {/* Side details of documents Pages and document Name - START */}
<p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'> <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
page {indx + 1} of {doc.images && doc.images.length} page {indx + 1} of {doc.pages && doc.pages.length}
</p> </p>
{/* Side details of documents Pages and document Name - END */} {/* Side details of documents Pages and document Name - END */}

75
src/components/dashboard/SendForSign.tsx
View File

@ -2,10 +2,14 @@ import React, { useEffect, useRef } from 'react'
import { IoMdArrowDropdown } from "react-icons/io"; import { IoMdArrowDropdown } from "react-icons/io";
import { IoIosSend } from "react-icons/io"; import { IoIosSend } from "react-icons/io";
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { setSignType } from '../../store/slices/selectedDocsSlice'; import { setSignType, SignType } from '../../store/slices/selectedDocsSlice';
import { RootState } from '../../store/store'; import { RootState } from '../../store/store';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Bounce, toast } from 'react-toastify'; import { Bounce, toast } from 'react-toastify';
import api from '../../config/api';
import { StartCard } from '../home/StartSection';
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
import { SignTypeEnum } from '../../utlity/types';
// import { IoMdArrowDropright } from "react-icons/io"; // import { IoMdArrowDropright } from "react-icons/io";
interface Props { interface Props {
@ -22,32 +26,55 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
sendForSignDropdown && dropDownRef.current?.focus(); sendForSignDropdown && dropDownRef.current?.focus();
}, [sendForSignDropdown]) }, [sendForSignDropdown])
const user = useSelector((state: RootState) => state.user);
if (!user.account || user.account === null) {
window.location.href = "/login";
return;
}
const defaultAccountId = user.account.id;
const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments); const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments);
const handleSendSignDispatch: (type: "self-sign" | "multiple-sign") => void = (signType) => { const handleStartSectionClick = (signType: SignTypeEnum) => {
if (selectedDocuments === null || !selectedDocuments.length) {
if (selectedDocuments === null || !selectedDocuments.length) {
toast.dismiss();
toast.error("Select 📄 Documents first!", {
position: "bottom-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: false,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
transition: Bounce,
});
return
}
}
if (selectedDocuments.length) { api.post(`/api/accounts/${defaultAccountId}/transactions`)
dispatch(setSignType(signType)); .then(res => {
} if (res.status === 200 || res.status === 201) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
dispatch(setTransactionId(res.data));
let navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}`;
if (signType === SignTypeEnum.selfSign) navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}/self_sign`;
setTimeout(() => navigate(navigateUrl), 0)
}
})
.catch(err => console.log(err))
} }
// const handleSendSignDispatch: (type: "self-sign" | "multiple-sign") => void = (signType) => {
// if (selectedDocuments === null || !selectedDocuments.length) {
// if (selectedDocuments === null || !selectedDocuments.length) {
// toast.dismiss();
// toast.error("Select 📄 Documents first!", {
// position: "bottom-right",
// autoClose: 5000,
// hideProgressBar: false,
// closeOnClick: false,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// theme: "light",
// transition: Bounce,
// });
// return
// }
// }
// if (selectedDocuments.length) {
// dispatch(setSignType(signType));
// }
// }
return ( return (
<div className='relative max-h-max pb-3' <div className='relative max-h-max pb-3'
tabIndex={0} tabIndex={0}
@ -73,12 +100,12 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
{ {
sendForSignDropdown && sendForSignDropdown &&
<div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}> <div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
<div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('self-sign')}> <div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
<p>Self Sign</p> <p>Self Sign</p>
<p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p> <p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
</div> </div>
<div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div> <div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
<div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('multiple-sign')}> <div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
<p>Send for Sign</p> <p>Send for Sign</p>
<p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p> <p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
</div> </div>

4
src/components/home/StartSection.tsx
View File

@ -8,7 +8,7 @@ import api from '../../config/api';
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice'; import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
interface StartCard { export interface StartCard {
icon: ReactNode; icon: ReactNode;
title: string; title: string;
description: string; description: string;
@ -57,7 +57,7 @@ const StartSection = () => {
if (res.status === 200 || res.status === 201) { if (res.status === 200 || res.status === 201) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED)); dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
dispatch(setTransactionId(res.data)); dispatch(setTransactionId(res.data));
setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data}`), 0) setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
} }
}) })
.catch(err => console.log(err)) .catch(err => console.log(err))

2
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -316,7 +316,7 @@ const DocumentCompletionScreen = () => {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
{/* <FaFileAlt className="text-blue-600 text-xl" /> */} {/* <FaFileAlt className="text-blue-600 text-xl" /> */}
<img src={item.images[0].src} alt="document" className="h-10 w-10" /> <img src={item.pages[0].src} alt="document" className="h-10 w-10" />
</div> </div>
<div> <div>
<h3 className="text-md font-semibold text-gray-800"> <h3 className="text-md font-semibold text-gray-800">

89
src/components/process/processStepOne/ProcessStepOne.tsx
View File

@ -15,6 +15,7 @@ import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
import Loader from "../../dashboard/Loader"; import Loader from "../../dashboard/Loader";
import { Bounce, toast } from "react-toastify"; import { Bounce, toast } from "react-toastify";
import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice"; import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
import { SignTypeEnum } from "../../../utlity/types";
const ProcessStepOne = () => { const ProcessStepOne = () => {
interface EmailDtls { interface EmailDtls {
@ -23,8 +24,8 @@ const ProcessStepOne = () => {
} }
let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS; let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
console.log("transactionTemplateToggle1", transactionTemplateToggle)
console.log() const signType = useParams<{ signType: string }>().signType;
const templateId = useParams<{ templateId: string }>().templateId; const templateId = useParams<{ templateId: string }>().templateId;
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
@ -33,11 +34,11 @@ const ProcessStepOne = () => {
if (!transactionId) { if (!transactionId) {
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES; transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
console.log("transactionTemplateToggle2", transactionTemplateToggle)
transactionId = templateId; transactionId = templateId;
dispatch(toggleToTemplates()); dispatch(toggleToTemplates());
} }
console.log("ProcessStepOne called with accountId:", accountId, "and transactionId:", transactionId);
// if (!accountId || !transactionId) { // if (!accountId || !transactionId) {
// window.location.href = "/"; // window.location.href = "/";
// return null; // return null;
@ -48,10 +49,10 @@ const ProcessStepOne = () => {
const selectedDocuments = useSelector((state: RootState) => state.documents.documents) const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients) const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
const userData = useSelector((state: RootState) => state.user)
console.log("selectedRecipients", selectedRecipients) console.log("selectedRecipients", selectedRecipients)
useEffect(() => { useEffect(() => {
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId })); selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId })); selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
@ -85,6 +86,8 @@ const ProcessStepOne = () => {
formError.subject = true formError.subject = true
} }
if(SignTypeEnum.selfSign === signType) formError.recipients = false;
if (formError.documents || formError.recipients || formError.subject) { if (formError.documents || formError.recipients || formError.subject) {
console.log(selectedDocuments, 'line 193') console.log(selectedDocuments, 'line 193')
toast.dismiss(); toast.dismiss();
@ -149,11 +152,38 @@ const ProcessStepOne = () => {
roleName: recipient.roleName roleName: recipient.roleName
})); }));
dispatch(addRecipientAsync({ recipientsData, accountId, transactionId })); let recipientsDataTemp = recipientsData;
if (signType === SignTypeEnum.selfSign) {
recipientsDataTemp = [{
id: null,
routingOrder: 1,
provideOwnTags: true,
type: recipientType.SIGNER,
firstName: userData.firstName,
lastName: userData.lastName,
authType: "NONE",
deliveryMethod: "EMAIL",
email: userData.email,
hostName: "",
hostEmail: "",
company: "",
title: "",
website: "",
phone: "",
accessCode: "",
accessCodeDelivery: true,
language: "en",
name: `${userData.firstName} ${userData.lastName}`,
roleName: ""
}]
}
dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
dispatch(showLoader("Processing Message...")); dispatch(showLoader("Processing Message..."));
console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`) console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
subject: emailDtls.subject, message: emailDtls.message, subject: emailDtls.subject, message: emailDtls.message,
status: "CREATED" status: "CREATED"
@ -202,6 +232,15 @@ const ProcessStepOne = () => {
navigate('/') navigate('/')
} }
const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
navigate("self_sign");
} else {
navigate("./../");
}
}
const globalLoader = useSelector((state: RootState) => state.loader) const globalLoader = useSelector((state: RootState) => state.loader)
return ( return (
@ -219,12 +258,15 @@ const ProcessStepOne = () => {
</div> </div>
<div className='flex items-center gap-3'> <div className='flex items-center gap-3'>
<button <div className="flex items-center" >
onClick={() => handleNextClick(true)} <input
className="text-sm px-4 py-2 rounded border border-gray-300 hover:bg-gray-100 transition" checked={signType === SignTypeEnum.selfSign}
> onChange={(e) => handleSelfSignCb(e)}
Send Now id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none"
</button> />
<label htmlFor="default-checkbox" className="ms-2 text-sm text-slate-600">SELF SIGN</label>
</div>
<button <button
onClick={() => handleNextClick(false)} onClick={() => handleNextClick(false)}
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition" className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition"
@ -244,14 +286,17 @@ const ProcessStepOne = () => {
</section> </section>
{/* Recipients */} {/* Recipients */}
<section className="mt-8"> {
<h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2> signType !== SignTypeEnum.selfSign &&
<div className="flex flex-col gap-4 align-start"> < section className="mt-8">
<RecipientCards /> <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
{/* {signType !== "self-sign" && <RecipientAddCard />} */} <div className="flex flex-col gap-4 align-start">
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} /> <RecipientCards />
</div> {/* {signType !== "self-sign" && <RecipientAddCard />} */}
</section> <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} />
</div>
</section>
}
{/* Email */} {/* Email */}
<section className="mt-8"> <section className="mt-8">
@ -286,7 +331,7 @@ const ProcessStepOne = () => {
</div> </div>
{globalLoader.isLoading && <Loader />} {globalLoader.isLoading && <Loader />}
</div> </div >
</> </>
); );
} }

2
src/components/process/processStepOne/RecipientAddCard.tsx
View File

@ -48,7 +48,7 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
// Validation Ends // Validation Ends
dispatch(addRecipient(recipient)); dispatch(addRecipient(recipient));
setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean }); setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToRemove: false });
formRef.current?.reset(); formRef.current?.reset();
} }

20
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -65,6 +65,8 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments) // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
const selectedDocuments = useSelector((state: RootState) => state.documents.documents) const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
console.log("selectedDocuments",selectedDocuments)
const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({}); const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
console.log("droppedItems", droppedItems) console.log("droppedItems", droppedItems)
@ -1040,12 +1042,6 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
handleDirectionalMove(direction, 5); // Use default stepSize of 5 handleDirectionalMove(direction, 5); // Use default stepSize of 5
}; };
return ( return (
<> <>
{/* Center Doc Container - START */} {/* Center Doc Container - START */}
@ -1061,7 +1057,7 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
<div className='flex flex-col gap-3 max-w-max relative left-[50%] translate-x-[-50%]'> <div className='flex flex-col gap-3 max-w-max relative left-[50%] translate-x-[-50%]'>
{ {
doc.images && doc.images.length > 0 && doc.images.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.id}_${page.index}`; const key = `${doc.id}_${page.index}`;
return ( return (
<div <div
@ -1178,11 +1174,11 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
{/* Side details of documents Pages and document Name - START */} {/* Side details of documents Pages and document Name - START */}
<p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'> <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
page {indx + 1} of {doc.images && doc.images.length} page {indx + 1} of {doc.pages && doc.pages.length}
</p> </p>
{/* <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs right-[-140px] text-slate-600'> {/* <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs right-[-140px] text-slate-600'>
Document {indxDoc + 1} {doc.name} Document {indxDoc + 1} {doc.name}
</p> */} </p> */}
{/* Side details of documents Pages and document Name - END */} {/* Side details of documents Pages and document Name - END */}

6
src/components/process/processStepTwo/LeftSideBar.tsx
View File

@ -133,10 +133,10 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
onClick={() => setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)} onClick={() => setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}> className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
{ {
document.images != undefined && <img document.pages != undefined && <img
key={indx} key={indx}
className='rounded-sm shadow' className='rounded-sm shadow'
src={document.images[0].src} src={document.pages[0].src}
alt="" /> alt="" />
} }
@ -151,7 +151,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
{ {
dropDownTogglePage === 'pageDropDown' + indx && dropDownTogglePage === 'pageDropDown' + indx &&
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'> <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
{document.images != undefined && document.images.map((img, indx) => ( {document.pages != undefined && document.pages.map((img, indx) => (
<a <a
href={"#" + document.id + indx} href={"#" + document.id + indx}
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300' className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'

2
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -438,7 +438,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
<div className="px-4 py-4 border-b border-gray-200"> <div className="px-4 py-4 border-b border-gray-200">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className='px-1 py-1'> <div className='px-1 py-1'>
<h3 className="text-md font-semibold text-gray-900">Add Signature</h3> <h3 className="text-md font-semibold text-gray-900">Add Signature </h3>
<p className="text-xs text-gray-500">Create your digital signature</p> <p className="text-xs text-gray-500">Create your digital signature</p>
</div> </div>
</div> </div>

6
src/components/signature/SignCon.tsx
View File

@ -506,7 +506,11 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const getUserDetails = async () => { const getUserDetails = async () => {
try { try {
let res = await api.get(`/api/user/details`); let res = await axios.get(`/api/user/details`, {
headers: {
"ngrok-skip-browser-warning": "69420",
}
});
console.log("getuser", res); console.log("getuser", res);
let currUser = res?.data; let currUser = res?.data;
setUser(currUser); setUser(currUser);

2
src/components/templates/Templates.tsx
View File

@ -77,6 +77,8 @@ const Templates = () => {
}; };
let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload) let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
console.log("handleUseClick", res.data) console.log("handleUseClick", res.data)
// /process-step-one/:accountId/:transactionId
navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}`);
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }

6
src/store/slices/selectedDocsSlice.ts
View File

@ -21,7 +21,7 @@ export interface SelectedDocument {
extension: string; extension: string;
original: boolean; original: boolean;
corrupted?: boolean; corrupted?: boolean;
images?: Image[]; pages?: Image[];
} }
export interface PayloadSelectedDocument { export interface PayloadSelectedDocument {
@ -30,7 +30,7 @@ export interface PayloadSelectedDocument {
extension: string; extension: string;
original: boolean; original: boolean;
corrupted?: boolean; corrupted?: boolean;
images?: Image[]; pages?: Image[];
} }
interface SelectedDocumentsState { interface SelectedDocumentsState {
@ -87,7 +87,7 @@ const selectedDocumentsSlice = createSlice({
const docId = document.documentId; const docId = document.documentId;
for (const [index, selDoc] of state.selectedDocuments.entries()) { for (const [index, selDoc] of state.selectedDocuments.entries()) {
if (selDoc.id === docId) { if (selDoc.id === docId) {
state.selectedDocuments[index].images = document.images; state.selectedDocuments[index].pages = document.pages;
break; break;
} }
} }

3
src/store/slices/selectedRecipientsSlice.tsx
View File

@ -351,9 +351,10 @@ export interface Recipient {
hostEmail: string; hostEmail: string;
type: recipientType; type: recipientType;
color?: string; color?: string;
roleName: string;
allowSenderToEdit: Boolean; allowSenderToEdit: Boolean;
allowSenderToRemove: Boolean; allowSenderToRemove: Boolean;
roleName:string
provideOwnTags?: boolean;
} }
export interface SelectedRecipientInt { export interface SelectedRecipientInt {

164
src/utlity/types.tsx
View File

@ -1,61 +1,61 @@
import { JSX } from "react"; import { JSX } from "react";
export interface DroppedItem { export interface DroppedItem {
id?: string; id?: string;
icon: JSX.Element; icon: JSX.Element;
focusElementIndx?: number; focusElementIndx?: number;
label?: string; label?: string;
type: string; type: string;
subType?: string; subType?: string;
dimensions: { dimensions: {
left: number; left: number;
top: number; top: number;
width: number; width: number;
height: number; height: number;
} }
recipientId: number; recipientId: number;
// mask?: { // mask?: {
// type: string; // type: string;
// character: string; // character: string;
// } // }
maskType?: string; maskType?: string;
maskCharacter?: string; maskCharacter?: string;
required?: boolean; required?: boolean;
format?: string; format?: string;
radioGroups?: DroppedItem[]; radioGroups?: DroppedItem[];
// documentIndex: number; // documentIndex: number;
documentId: string; documentId: string;
pageIndex: number; pageIndex: number;
options?: string[] options?: string[]
selectedValue?: string | null; selectedValue?: string | null;
radioPosition?: { radioPosition?: {
topMin: number; topMin: number;
topMax: number; topMax: number;
leftMin: number; leftMin: number;
leftMax: number; leftMax: number;
width?: number; width?: number;
height?: number height?: number
}; };
value?: string | number; value?: string | number;
validation?: { validation?: {
minLength: number; minLength: number;
maxLength: number; maxLength: number;
error: string; error: string;
regex: string[]; regex: string[];
}; };
isDeleted: boolean; isDeleted: boolean;
} }
export interface DroppedItemsObj { export interface DroppedItemsObj {
[key: string]: DroppedItem[] [key: string]: DroppedItem[]
} }
export enum OpenType { export enum OpenType {
TYPED, TYPED,
DRAW, DRAW,
UPLOADED UPLOADED
} }
// types/account.ts // types/account.ts
@ -81,39 +81,45 @@ export interface AccountData {
} }
export interface TagsProperties { export interface TagsProperties {
"editable": boolean; "editable": boolean;
"required": boolean; "required": boolean;
"navigationOrder": number; "navigationOrder": number;
"type": string; "type": string;
"lastName"?: boolean; "lastName"?: boolean;
"firstName"?: boolean; "firstName"?: boolean;
"maxLength"?: number; "maxLength"?: number;
"minLength"?: number; "minLength"?: number;
"readOnly"?: boolean; "readOnly"?: boolean;
"multiLine"?: boolean; "multiLine"?: boolean;
"regex"?: string[]; "regex"?: string[];
"format"?: string; "format"?: string;
"dateFormat"?: string; "dateFormat"?: string;
"currentTimeStamp"?: boolean; "currentTimeStamp"?: boolean;
"decimalPlace"?: number; "decimalPlace"?: number;
"multiSelect"?: boolean; "multiSelect"?: boolean;
} }
export enum TagsTypes { export enum TagsTypes {
TEXT= "text", TEXT = "text",
SIGNATURE= "signature", SIGNATURE = "signature",
INITIALS= "initials", INITIALS = "initials",
TEMPORAL= "temporal", TEMPORAL = "temporal",
NUMBER= "number", NUMBER = "number",
IMAGE= "image", IMAGE = "image",
STAMP= "stamp", STAMP = "stamp",
CHECKBOX= "checkbox", CHECKBOX = "checkbox",
SELECT= "select", SELECT = "select",
FILE= "file", FILE = "file",
ATTACHMENT= "attachment", ATTACHMENT = "attachment",
RADIO= "radio", RADIO = "radio",
EMAIL= "email", EMAIL = "email",
NAME= "name", NAME = "name",
COMPANY= "company", COMPANY = "company",
} }
export enum SignTypeEnum {
selfSign = "self_sign",
multipleSign = "multi_sign"
}