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

jai #7

Merged
jaipandey merged 2 commits from jai into main 2025-07-25 14:30:19 +00:00
Conversation 0 Commits 2 Files Changed 12 +210 -64
8 changed files with 210 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 996f61fbb4 - Show all commits

2
src/components/CommonNav.tsx
View File

@ -300,7 +300,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
aria-expanded={open}
aria-haspopup="true"
>
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
<div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
{user ? (
<span className="w-full h-full object-cover p-1.5 font-bold">
{(user?.name?.slice(0, 2)).toUpperCase()}

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

@ -39,6 +39,11 @@ const ProcessStepOne = () => {
dispatch(toggleToTemplates());
}
const [editCase , setEditCase] = useState<string>("")
const [editRecipient , setEditRecipient] = useState({})
// if (!accountId || !transactionId) {
// window.location.href = "/";
// return null;
@ -54,6 +59,11 @@ const ProcessStepOne = () => {
console.log("selectedRecipients", selectedRecipients)
useEffect(() => {
(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 }));
}, [])
@ -149,7 +159,9 @@ const ProcessStepOne = () => {
accessCodeDelivery: true,
language: "en",
name: `${recipient.firstName} ${recipient.lastName}`,
roleName: recipient.roleName
roleName: recipient.roleName,
allowSenderToEdit: recipient.allowSenderToEdit ,
allowSenderToDelete: recipient.allowSenderToDelete,
}));
let recipientsDataTemp = recipientsData;
@ -291,9 +303,9 @@ const ProcessStepOne = () => {
< section className="mt-8">
<h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
<div className="flex flex-col gap-4 align-start">
<RecipientCards />
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
{/* {signType !== "self-sign" && <RecipientAddCard />} */}
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} />
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
</div>
</section>
}

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

@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { FaPlus } from "react-icons/fa";
import { addRecipient, Recipient, recipientType } from "../../../store/slices/selectedRecipientsSlice";
import { addRecipient, Recipient, recipientType, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../../store/store";
import api from "../../../config/api";
@ -8,6 +8,8 @@ import ContactModal from "./ContactModal";
import useDebouncedEffect from "../../../utlity/useDebounce";
import { IoIosSettings } from "react-icons/io";
import { FiEdit, FiTrash } from "react-icons/fi";
import { v4 as uuidv4 } from 'uuid';
interface ContactType {
id: string;
@ -21,7 +23,8 @@ export interface ContactTypeObj {
contacts: ContactType[];
}
const RecipientAddCard = ({ transactionTemplateToggle }) => {
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,setEditRecipient, setEditCase }) => {
const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
const [openContactModal, setOpenContactModal] = useState(false);
@ -29,29 +32,79 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
const dispatch = useDispatch<AppDispatch>();
const formRef = useRef<HTMLFormElement | null>(null);
const [recipient, setRecipients] = useState<Recipient>({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean });
const [recipient, setRecipients] = useState<Recipient>({ uuid:null, newOne:false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false });
const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
console.log(recipient)
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (recipient.lastName === "" || recipient.email === "" || !recipient.type) return;
// Validate Email Format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(recipient.email)) {
console.log("Invalid email format");
return;
useEffect(() => {
if (editCase === "Edit" && editRecipient) {
setRecipients({
// id:editRecipient.id,
firstName: editRecipient.firstName || "",
lastName: editRecipient.lastName || "",
email: editRecipient.email || "",
hostName: editRecipient.hostName || "",
hostEmail: editRecipient.hostEmail || "",
roleName: editRecipient.roleName || "",
type: editRecipient.type || recipientType.SIGNER,
allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
newOne:editRecipient.newOne ?? false
});
}
// Validation Ends
}, [editCase, editRecipient]);
dispatch(addRecipient(recipient));
setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToRemove: false });
formRef.current?.reset();
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log("recipientrecipient",recipient)
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;
}
if (editCase === 'Edit') {
dispatch(updateRecipient(recipient));
} else {
dispatch(addRecipient({
...recipient,
uuid:uuidv4(),
newOne:true
}));
}
// ✅ Reset state and form
setRecipients({
firstName: "",
lastName: "",
email: "",
hostName: "",
hostEmail: "",
roleName: "",
type: recipientType.SIGNER,
allowSenderToEdit: false,
allowSenderToDelete: false,
uuid:"",
newOne:false
});
// setRecipients(null),
setEditCase("")
formRef.current?.reset();
};
// useEffect(() => {
// if (!recipient.firstName.length) return;
@ -133,10 +186,10 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
} overflow-hidden`}
>
<div className="text-sm text-gray-600">
{recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Full permissions granted"}
{recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "Edit permission granted"}
{!recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Delete permission granted"}
{!recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "No permissions granted"}
{recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
{recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
{!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
{!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"}
</div>
</div>
{/* Animated Permission Controls */}
@ -178,23 +231,23 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
{/* Delete Permission */}
<div className="relative group">
<label
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToRemove
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
? 'bg-red-100 border-red-500 shadow-lg'
: 'bg-white border-gray-300 hover:border-red-400'
}`}
>
<input
type="checkbox"
checked={recipient.allowSenderToRemove}
checked={recipient.allowSenderToDelete}
onChange={(e) =>
setRecipients({ ...recipient, allowSenderToRemove: e.target.checked })
setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
}
onFocus={() => setOpenContactModal(true)}
onBlur={handleContactModalBlur}
className="absolute w-full h-full opacity-0 cursor-pointer"
/>
<FiTrash
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToRemove ? 'text-red-600' : 'text-gray-400'
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
}`}
/>
</label>
@ -332,7 +385,7 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
type="submit"
className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
>
<FaPlus size={14} /> Add Recipient
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
</button>
</div>
</form>

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

@ -13,6 +13,7 @@ import { useState } from "react";
import SigningOrderDiagram from "../../../SigningOrderDiagram ";
import { IoCloseOutline } from "react-icons/io5";
import { useParams } from "react-router-dom";
import { FiEdit } from "react-icons/fi";
const getInitials = (name: string) => {
if (!name) return "";
@ -23,7 +24,13 @@ const getInitials = (name: string) => {
.toUpperCase();
};
const RecipientCards = () => {
type CardsData = {
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
setEditCase: (string: any) => void;
transactionTemplateToggle: string
};
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
const templateId = useParams<{ templateId: string }>().templateId;
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
@ -32,9 +39,9 @@ const RecipientCards = () => {
if (!transactionId) {
transactionId = templateId;
}
const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
console.log("recipients.length",recipients)
console.log("recipients.length", recipients)
// const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder);
const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
@ -44,15 +51,24 @@ const RecipientCards = () => {
dispatch(updateRecipientOrder({ id, routingOrder: value }));
};
const handleEditRecipient = (recipient) => {
// alert(JSON.stringify(recipient))
setEditCase('Edit')
setEditRecipient(recipient)
}
const handleRemoveRecipient = (recipient) => {
if (!accountId || !transactionId) return;
// dispatch(removeSelectedRecipient(recipient))
dispatch(removeRecipientAsync({
recipientId: recipient.id,
email: recipient.email,
accountId: accountId,
transactionId: transactionId,
}))
if (recipient.uuid) {
dispatch(removeSelectedRecipient(recipient))
} else {
dispatch(removeRecipientAsync({
recipientId: recipient.id,
email: recipient.email,
accountId: accountId,
transactionId: transactionId,
}))
}
if (recipients.length === 2) {
let leftRecipient = recipients.filter((obj) => {
if ("id" in obj && "id" in recipient) {
@ -144,14 +160,45 @@ const RecipientCards = () => {
</div>
{signType !== "self-sign" && (
<button
type="button"
aria-label={`Remove recipient ${recipient.firstName}`}
onClick={() => handleRemoveRecipient(recipient)}
className="text-gray-400 hover:text-red-600 transition-colors"
>
<ImBin size={16} />
</button>
<div className="flex justify-between gap-2 items-center">
{/* Edit Button */}
<button
type="button"
title="Edit recipient"
aria-label={`Edit recipient ${recipient.firstName}`}
onClick={() => handleEditRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to edit
(!recipient.newOne && !recipient.allowSenderToEdit)
}
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
>
<FiEdit size={16} />
</button>
{/* Delete Button */}
<button
type="button"
title="Remove recipient"
aria-label={`Remove recipient ${recipient.firstName}`}
onClick={() => handleRemoveRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to delete
(!recipient.newOne && !recipient.allowSenderToDelete)
}
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
>
<ImBin size={16} />
</button>
</div>
)}
</div>
))}

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' | 'SELECT'>('TYPE');
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE');
const [fullName, setFullName] = useState('');
const [initials, setInitials] = useState('');
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@ -110,7 +110,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
{ id: 'TYPE', label: 'TYPE', 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" /> },
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
];
// Initialize form with editing signature data
@ -394,14 +394,14 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div>
);
case 'SELECT':
return (
<div className="h-full flex flex-col">
<div className="mb-6">
<h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
</div>
</div>
);
// case 'SELECT':
// return (
// <div className="h-full flex flex-col">
// <div className="mb-6">
// <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
// </div>
// </div>
// );
default:
return null;
}

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

@ -232,7 +232,7 @@ const SignatureManager: React.FC = () => {
{/* Empty State (if no signatures) */}
{signatures.length === 0 && (
<div className="bg-white rounded-xl shadow-lg p-12 text-center mt-8">
<div className=" rounded-xl shadow-lg p-12 text-center mt-8">
<div className="text-gray-400 mb-4">
<FiEdit3 className="w-16 h-16 mx-auto" />
</div>

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

@ -149,7 +149,7 @@ const Templates = () => {
<td className="px-4 py-2 text-sm text-center">{item.name || 'Dummy'}</td>
<td className="px-4 py-2 text-sm text-center">{formatDate(item.createdAt)}</td>
<td className="px-4 py-2 text-sm text-center">{formatDate(item.lastModifiedAt)}</td>
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="from-green-500 cursor-pointer to-blue-500 bg-gradient-to-br px-3 py-1 rounded-lg text-white font-semibold text-[12px]">Use</span></td>
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">Use</span></td>
{/* Dropdown Trigger + Tooltip */}
<td className="px-4 py-2 text-center relative">
<button

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

@ -351,10 +351,12 @@ export interface Recipient {
hostEmail: string;
type: recipientType;
color?: string;
allowSenderToEdit: Boolean;
allowSenderToRemove: Boolean;
roleName:string
allowSenderToEdit: boolean;
allowSenderToDelete: boolean;
roleName: string
provideOwnTags?: boolean;
uuid?: string;
newOne: boolean;
}
export interface SelectedRecipientInt {
@ -403,6 +405,8 @@ export const addRecipientAsync = createAsyncThunk<
const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
console.log("createRecipientsData", createRecipientsData)
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
const resUpdate = updateRecipientsData.length
@ -518,7 +522,7 @@ const selectedRecipientsSlice = createSlice({
state.signingOrder = action.payload;
},
removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
},
addColorsToRecipient: (state) => {
for (const [index, recipient] of state.recipients.entries()) {
@ -540,6 +544,35 @@ const selectedRecipientsSlice = createSlice({
}
}
},
updateRecipient(state, action: PayloadAction<Recipient>) {
const payloadUuid = String(action.payload.uuid);
// First try matching by id
let index = state.recipients.findIndex(
r => String(r.id) === payloadUuid
);
// If not found, try matching by uuid
if (index === -1) {
index = state.recipients.findIndex(
r => String(r.uuid) === payloadUuid
);
}
if (index !== -1) {
// Merge existing recipient with new values
state.recipients[index] = {
...state.recipients[index],
...action.payload
};
} else {
console.warn('Recipient not found with uuid:', payloadUuid);
}
}
,
resetSelRecipient: () => initialState
},
extraReducers: (builder) => {
@ -602,6 +635,7 @@ export const {
updateRecipientIds,
resetSelRecipient,
updateRecipientOrder,
updateRecipient,
resetRecipients
} = selectedRecipientsSlice.actions;