, key: string, index: number) => {
event.preventDefault();
- let targetContainer = event?.currentTarget?.parentElement?.parentElement;
+ let targetContainer = event?.currentTarget?.parentElement?.parentElement;
let targetElement = event?.currentTarget;
if (!targetContainer || !targetElement) return;
@@ -810,6 +810,10 @@ const SignDocument = () => {
+ Hi! {recipient && recipient.firstName} {recipient && recipient.lastName}
+
+
+
{/* Right Side - STARTS */}
@@ -846,15 +850,15 @@ const SignDocument = () => {
{(!transparentTags && !hideTags) ?
:
Signed Successfully
}
-
{recipient && recipient.firstName} {recipient && recipient.lastName}
handleSignClick(index , item.id)}
+ onClick={() => handleSignClick(index, item.id)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
@@ -1041,8 +1045,8 @@ const SignDocument = () => {
height: `${item.dimensions.height}px`,
}}
// src={saved.signature as string} />
- src={`data:image/png;base64,${saved.signature}`}
- />
+ src={`data:image/png;base64,${saved.signature}`}
+ />
}
}
{/* SIGNATURE FIELD - END */}
@@ -1053,7 +1057,7 @@ const SignDocument = () => {
handleSignClick(index , item.id)}
+ onClick={() => handleSignClick(index, item.id)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
@@ -1067,8 +1071,8 @@ const SignDocument = () => {
}}
className="w-[100%] h-full"
// src={saved.initial as string}
- src={`data:image/png;base64,${saved.initial}`}
- />
+ src={`data:image/png;base64,${saved.initial}`}
+ />
}
}
{/* INITIALS FIELD - END */}
@@ -1274,7 +1278,13 @@ const SignDocument = () => {
-
+ {recipient &&
+ }
diff --git a/src/components/dashboard/SendForSign.tsx b/src/components/dashboard/SendForSign.tsx
index 6629539..43966eb 100644
--- a/src/components/dashboard/SendForSign.tsx
+++ b/src/components/dashboard/SendForSign.tsx
@@ -42,10 +42,10 @@ const SendForSign: React.FC
= ({ showSideBar }) => {
.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)
+ dispatch(setTransactionId(res.data.id));
+ let navigateUrl = `/process-step-one/${defaultAccountId}/${res.data.id}`;
+ if (signType === SignTypeEnum.selfSign) navigateUrl = `/process-step-one/${defaultAccountId}/${res.data.id}/self_sign`;
+ setTimeout(() => navigate(navigateUrl), 0)
}
})
.catch(err => console.log(err))
@@ -81,31 +81,40 @@ const SendForSign: React.FC = ({ showSideBar }) => {
ref={dropDownRef}
onBlur={() => setSendForSignDropdown(false)}
>
- setSendForSignDropdown(!sendForSignDropdown)}>
-
+
+
handleStartSectionClick(SignTypeEnum.multipleSign)}
+ className={`w-full`}>
{
showSideBar ?
-
Send for signature
+
Send for signature
:
}
- {showSideBar &&
-
-
}
+ {showSideBar &&
+
+ setSendForSignDropdown(!sendForSignDropdown)}
+ className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
+
}
{/* Drop Down Box */}
{
sendForSignDropdown &&
-
handleStartSectionClick(SignTypeEnum.selfSign)}>
+
handleStartSectionClick(SignTypeEnum.selfSign)}>
Self Sign
You're the only signer.
-
handleStartSectionClick(SignTypeEnum.multipleSign)}>
+
handleStartSectionClick(SignTypeEnum.multipleSign)}>
Send for Sign
You and other need to sign.
diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx
new file mode 100644
index 0000000..4140e42
--- /dev/null
+++ b/src/components/home/StartNow.tsx
@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import { FiUpload } from 'react-icons/fi'
+import { uploadDocuments } from '../../store/slices/documentSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+import { RootState } from '../../store/store';
+import api from '../../config/api';
+
+const StartNow = () => {
+ const fileInputRef = useRef
(null);
+ const [files, setFiles] = useState([]);
+
+ const userData = useSelector((state: RootState) => state.user);
+
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const handleUpload = async (filesToUpload: File[]) => {
+
+ const accountId = userData.account?.id;
+ const transactionRes = await api.post(`/api/accounts/${userData.account?.id}/transactions`);
+ const transactionId = transactionRes.data.id
+
+ const formData = new FormData();
+ formData.append("file", filesToUpload[0]);
+
+ dispatch(uploadDocuments({ formData, accountId, transactionId }))
+ .unwrap()
+ .then((res) => {
+ // toast.dismiss();
+ setFiles([]);
+ navigate(`/process-step-one/${accountId}/${transactionId}`);
+ })
+ .catch((err) => {
+ console.error("Upload failed", err);
+ });
+ };
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
+ if (selectedFiles.length > 0) {
+ setFiles((prev) => [...prev, ...selectedFiles]);
+ handleUpload(selectedFiles);
+ }
+ };
+
+ return (
+ <>
+ fileInputRef.current?.click()}
+ className="group cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
+ {/* Upload icon with subtle animation */}
+
+
+
+
+ {/* Compact text */}
+
+ Click to upload or drag and drop
+
+
+
+
+
+ PDF, JPG, PNG (max. 10MB)
+
+
+
+
+
Get Started
-
- {cards.map((card, index) => (
-
handleStartSectionClick(card)}
- key={index}
- className={`${card.bg} cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all h-full flex flex-col justify-between min-h-[220px]`}
- >
- {/* Icon + Text */}
-
-
- {card.icon}
+
+
+
+
+
+ {cards.map((card, index) => (
+
handleStartSectionClick(card)}
+ key={index}
+ className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
+ >
+ {/* Icon + Text */}
+
+
+ {card.icon}
+
+
+
{card.title}
+
{card.description}
-
{card.title}
-
{card.description}
-
+ {/* Bottom Area */}
+
+ {card.buttonText ? (
+
+ ) : (
+
+ )}
- {/* Bottom Area */}
-
- {card.buttonText ? (
-
- ) : (
-
- )}
-
-
+
+
-
- ))}
+ ))}
+
+
+
+
+
+
);
};
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx
index 9c0274d..1249a3e 100644
--- a/src/components/process/processStepOne/ProcessStepOne.tsx
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@@ -50,10 +50,25 @@ const ProcessStepOne = () => {
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
const userData = useSelector((state: RootState) => state.user)
+ // const userData = useSelector((state: RootState) => state.user)
+
+ const [transactionDetails, setTransactionDetails] = useState
([]);
console.log("selectedRecipients", selectedRecipients)
useEffect(() => {
+ // Fetching Transaction Details - START
+ (async () => {
+ try {
+ const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
+ setTransactionDetails(res.data)
+ } catch (e) {
+ console.log("Error - transactions details")
+ }
+ })()
+ // Fetching Transaction Details - END
+
+
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
}, [])
@@ -86,7 +101,7 @@ const ProcessStepOne = () => {
formError.subject = true
}
- if(SignTypeEnum.selfSign === signType) formError.recipients = false;
+ if (SignTypeEnum.selfSign === signType) formError.recipients = false;
if (formError.documents || formError.recipients || formError.subject) {
console.log(selectedDocuments, 'line 193')
@@ -153,6 +168,7 @@ const ProcessStepOne = () => {
}));
let recipientsDataTemp = recipientsData;
+ let recipientId = null;
if (signType === SignTypeEnum.selfSign) {
recipientsDataTemp = [{
@@ -177,9 +193,18 @@ const ProcessStepOne = () => {
name: `${userData.firstName} ${userData.lastName}`,
roleName: ""
}]
- }
- dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+ try {
+ const basePath = `/api/accounts/${accountId}/transactions/${transactionId}/recipients`;
+ const res = await api.post(basePath, recipientsDataTemp)
+ recipientId = res.data[0].id;
+ } catch (error) {
+ console.log("Error Creating Self Sign Recipient", error.message)
+ }
+
+ } else {
+ dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+ }
dispatch(showLoader("Processing Message..."));
console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
@@ -201,11 +226,23 @@ const ProcessStepOne = () => {
dispatch(resetDocuments())
dispatch(resetRecipients())
dispatch(hideLoader());
- if (transactionTemplateToggle === 'templates') {
+ if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
console.log(`/process-step-two/${accountId}/template/${transactionId}`)
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else {
- navigate(`/process-step-two/${accountId}/${transactionId}`);
+ if (signType === SignTypeEnum.selfSign) {
+ (async () => {
+ try {
+ const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+ console.log(res, "Check123");
+ navigate(`/sign/${recipientId}`);
+ } catch (err) {
+ console.log("Error Transaction Sent", err.message);
+ }
+ })()
+ } else {
+ navigate(`/process-step-two/${accountId}/${transactionId}`);
+ }
}
}, 1000);
}
@@ -258,15 +295,6 @@ const ProcessStepOne = () => {
-
- handleSelfSignCb(e)}
- id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none"
- />
-
-
-