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

first-form-docs reset

This commit is contained in:
JaiPandey425 2025-08-08 17:08:18 +05:30
parent cd2b8d3aff
commit 02bfa84094
6 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/home/StartNow.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { FiUpload } from 'react-icons/fi' import { FiUpload } from 'react-icons/fi'
import { uploadDocuments } from '../../store/slices/documentSlice'; import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -37,7 +37,8 @@ const StartNow = () => {
}); });
}; };
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
await dispatch(resetDocuments())
const selectedFiles = e.target.files ? Array.from(e.target.files) : []; const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
if (selectedFiles.length > 0) { if (selectedFiles.length > 0) {
setFiles((prev) => [...prev, ...selectedFiles]); setFiles((prev) => [...prev, ...selectedFiles]);

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

@ -46,7 +46,7 @@ type Signer = {
// Signers List Component // Signers List Component
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
return ( return (
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100 "> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
<div className="p-6"> <div className="p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2"> <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
@ -58,9 +58,9 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </div>
<div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar"> <div className="space-y-3 max-h-[50vh] overflow-y-auto no-scrollbar">
{signers.map((signer) => ( {signers.map((signer) => (
<div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 rounded-lg"> <div key={signer.id} className="flex items-center gap-4 p-3 bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium"> <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.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("")}
</div> </div>
@ -86,7 +86,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
))} ))}
</div> </div>
</div> </div>
</div> // </div>
); );
}; };
@ -121,10 +121,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
) || -1; ) || -1;
return ( return (
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100"> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
<div className="p-6"> <div className="p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3> <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
<div className="overflow-x-auto overflow-y-auto h-[22vh] no-scrollbar flex justify-center items-center"> <div className="overflow-x-auto overflow-y-auto h-[50vh] no-scrollbar flex justify-center items-center">
<div className="flex justify-center items-center gap-4 min-w-max"> <div className="flex justify-center items-center gap-4 min-w-max">
{/* Mail icon */} {/* Mail icon */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
@ -194,7 +194,7 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</div> </div>
</div> </div>
</div> </div>
</div> // </div>
); );
}; };
const DocumentSubmissionOptions = () => { const DocumentSubmissionOptions = () => {
@ -387,8 +387,8 @@ const DocumentSubmissionOptions = () => {
case 'success': case 'success':
return ( return (
<div className="text-center space-y-6"> <div className="text-center space-y-6">
<div className="w-24 h-24 bg-[var(--primary)] rounded-full flex items-center justify-center mx-auto shadow-lg animate-bounce"> <div className="w-24 h-24 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-6 mx-auto shadow-lg animate-bounce">
<FaCheck className="text-white text-3xl" /> <FaCheck className="text-white text-4xl" />
</div> </div>
<div> <div>
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3> <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
@ -430,22 +430,23 @@ const DocumentSubmissionOptions = () => {
} }
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6"> <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6">
<div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}> <div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
{/* Header */} {/* Header */}
<div className="flex items-center space-x-4 mb-5"> <div className="flex items-center space-x-4 mb-5">
<button className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group"> <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
<IoMdHome <IoMdHome
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition' className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
/> />
</button> </Link>
<div className="h-8 w-px bg-gray-300"></div> <div className="h-8 w-px bg-gray-300"></div>
<h1 className="text-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1> <h1 className="text-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
</div> </div>
{/* <div className='border mb-2 border-gray-500'></div> */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 "> <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
{/* Left Panel - Configuration */} {/* Left Panel - Configuration */}
@ -457,7 +458,6 @@ const DocumentSubmissionOptions = () => {
<h3 className="text-lg font-semibold text-gray-800 mb-4"> <h3 className="text-lg font-semibold text-gray-800 mb-4">
Choose an action after a signer completes the document. Choose an action after a signer completes the document.
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
{options.map((option) => { {options.map((option) => {
const Icon = option.icon; const Icon = option.icon;

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

@ -22,11 +22,11 @@ interface ContactType {
export interface ContactTypeObj { export interface ContactTypeObj {
type: string; type: string;
contacts: ContactType[]; contacts: ContactType[];
setEditRecipientCurrentEmail : any setEditRecipientCurrentEmail: any
} }
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef , setEditRecipientCurrentEmail }) => { const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => {
const [activeAccountId, setActiveAccountId] = useState<string | null>( const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null') JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
); );
@ -113,7 +113,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
hostName: editRecipient.hostName || "", hostName: editRecipient.hostName || "",
hostEmail: editRecipient.hostEmail || "", hostEmail: editRecipient.hostEmail || "",
roleName: editRecipient.roleName || "", roleName: editRecipient.roleName || "",
type: editRecipient.type || recipientType.SIGNER, type: editRecipient.type,
allowSenderToEdit: editRecipient.allowSenderToEdit ?? true, allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
allowSenderToDelete: editRecipient.allowSenderToDelete ?? true, allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''), uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
@ -210,11 +210,22 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
submitForm(); submitForm();
function submitForm() { function submitForm() {
if (editCase === 'Edit') { let updatedRecipient = { ...recipient };
dispatch(updateRecipient(recipient));
// Clear hostName and hostEmail if type is SIGNER or CC
if (
updatedRecipient.type === recipientType.SIGNER ||
updatedRecipient.type === recipientType.CC
) {
updatedRecipient.hostName = "";
updatedRecipient.hostEmail = "";
}
if (editCase === "Edit") {
dispatch(updateRecipient(updatedRecipient));
} else { } else {
dispatch(addRecipient({ dispatch(addRecipient({
...recipient, ...updatedRecipient,
uuid: uuidv4(), uuid: uuidv4(),
newOne: true, newOne: true,
})); }));
@ -580,7 +591,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
type="radio" type="radio"
name="recipient-type" name="recipient-type"
value={option.value} value={option.value}
defaultChecked={option.value === recipientType.SIGNER} checked={recipient.type === option.value}
onClick={(e) => setRecipients({ ...recipient, type: e.target.value })} onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
className="accent-[var(--primary)] cursor-pointer" className="accent-[var(--primary)] cursor-pointer"
/> />

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

@ -141,7 +141,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
{recipients.map((recipient, idx) => ( {recipients.map((recipient, idx) => (
<div <div
key={recipient.email + idx} key={recipient.email + idx}
className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-gray-200 opacity-40" : ""}`} className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-neutral-100 opacity-40 " : ""}`}
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
{/* {signingOrder && ( */} {/* {signingOrder && ( */}

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

@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
import api from '../../../config/api'; import api from '../../../config/api';
import RightSideBar from './rightSideBar/RightSideBar'; import RightSideBar, { TEXT } from './rightSideBar/RightSideBar';
import { DroppedItem, TagsTypes } from '../../../utlity/types'; import { DroppedItem, TagsTypes } from '../../../utlity/types';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
@ -241,6 +241,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
const updatedTagData = { const updatedTagData = {
"id": "id" in dropTag ? dropTag.id : null, "id": "id" in dropTag ? dropTag.id : null,
"label": dropTag.label, "label": dropTag.label,

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

@ -55,7 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getAllSignatures, getAllSignatures,
editingSignature editingSignature
}) => { }) => {
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE'); const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
const [fullName, setFullName] = useState(''); const [fullName, setFullName] = useState('');
const [initials, setInitials] = useState(''); const [initials, setInitials] = useState('');
const [isSubmitting, setIsSubmitting] = useState<boolean>(false); const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@ -107,7 +107,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
// Navigation items // Navigation items
const navigationItems = [ const navigationItems = [
{ id: 'TYPE', label: 'TYPE', icon: <GrCheckboxSelected className="w-4 h-4" /> }, { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> }, { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> }, { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> }, // { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
@ -118,7 +118,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
if (editingSignature) { if (editingSignature) {
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`); setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`); setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
setActiveTab(editingSignature.signatureType as 'TYPE' | 'DRAW' | 'UPLOAD'); setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
// Set font for SELECT tab // Set font for SELECT tab
const fontOption = signatureOptions.find(option => option.style === editingSignature.font); const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
@ -193,10 +193,12 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const handleSubmit = async () => { const handleSubmit = async () => {
setIsSubmitting(true); setIsSubmitting(true);
if (!signatures.fullSignature || !signatures.initials) { if (activeTab === 'DRAW' || activeTab === 'UPLOAD') {
alert('Please provide both signature and initials'); if (!signatures.fullSignature || !signatures.initials) {
setIsSubmitting(false); alert('Please provide both signature and initials');
return; setIsSubmitting(false);
return;
}
} }
try { try {
@ -207,7 +209,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
firstName: fullName.split(' ')[0] || user.firstName, firstName: fullName.split(' ')[0] || user.firstName,
lastName: fullName.split(' ')[1] || user.lastName, lastName: fullName.split(' ')[1] || user.lastName,
font: selectedSignature.style, font: selectedSignature.style,
default:checked default: checked
}; };
let res; let res;
@ -273,7 +275,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const renderContent = () => { const renderContent = () => {
switch (activeTab) { switch (activeTab) {
case 'TYPE': case 'SELECT':
return ( return (
<div className="h-full flex flex-col "> <div className="h-full flex flex-col ">
<div className="mb-6"> <div className="mb-6">
@ -481,7 +483,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
{navigationItems.map((item) => ( {navigationItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as 'TYPE' | 'DRAW' | 'UPLOAD')} onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
? 'bg-blue-50 text-blue-700 border border-blue-200' ? 'bg-blue-50 text-blue-700 border border-blue-200'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
@ -534,9 +536,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div> </div>
<p className="text-sm text-gray-700 opacity-80 ms-1"> <p className="text-sm text-gray-700 opacity-80 ms-1">
{checked
? 'Signature will be used by default.' Signature will be used by default.
: 'Signature will not be used by default.'}
</p> </p>
</label> </label>