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 { 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 { toast } from 'react-toastify';
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) : [];
if (selectedFiles.length > 0) {
setFiles((prev) => [...prev, ...selectedFiles]);

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

@ -46,7 +46,7 @@ type Signer = {
// Signers List Component
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
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="flex items-center justify-between mb-4">
<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>
</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) => (
<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">
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
</div>
@ -86,7 +86,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
))}
</div>
</div>
</div>
// </div>
);
};
@ -121,10 +121,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
) || -1;
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">
<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">
{/* Mail icon */}
<div className="flex flex-col items-center">
@ -194,7 +194,7 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</div>
</div>
</div>
</div>
// </div>
);
};
const DocumentSubmissionOptions = () => {
@ -387,8 +387,8 @@ const DocumentSubmissionOptions = () => {
case 'success':
return (
<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">
<FaCheck className="text-white text-3xl" />
<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-4xl" />
</div>
<div>
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
@ -430,22 +430,23 @@ const DocumentSubmissionOptions = () => {
}
};
return (
<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'}`}>
{/* Header */}
<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
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>
<h1 className="text-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
</div>
{/* <div className='border mb-2 border-gray-500'></div> */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
{/* Left Panel - Configuration */}
@ -457,7 +458,6 @@ const DocumentSubmissionOptions = () => {
<h3 className="text-lg font-semibold text-gray-800 mb-4">
Choose an action after a signer completes the document.
</h3>
<div className="space-y-3">
{options.map((option) => {
const Icon = option.icon;

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

@ -22,11 +22,11 @@ interface ContactType {
export interface ContactTypeObj {
type: string;
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>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
);
@ -113,7 +113,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
hostName: editRecipient.hostName || "",
hostEmail: editRecipient.hostEmail || "",
roleName: editRecipient.roleName || "",
type: editRecipient.type || recipientType.SIGNER,
type: editRecipient.type,
allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
@ -210,11 +210,22 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
submitForm();
function submitForm() {
if (editCase === 'Edit') {
dispatch(updateRecipient(recipient));
let updatedRecipient = { ...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 {
dispatch(addRecipient({
...recipient,
...updatedRecipient,
uuid: uuidv4(),
newOne: true,
}));
@ -580,7 +591,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
type="radio"
name="recipient-type"
value={option.value}
defaultChecked={option.value === recipientType.SIGNER}
checked={recipient.type === option.value}
onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
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) => (
<div
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">
{/* {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 RightSideBar from './rightSideBar/RightSideBar';
import RightSideBar, { TEXT } from './rightSideBar/RightSideBar';
import { DroppedItem, TagsTypes } from '../../../utlity/types';
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 updatedTagData = {
"id": "id" in dropTag ? dropTag.id : null,
"label": dropTag.label,

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

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