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

respo mob

This commit is contained in:
JaiPandey425 2025-09-01 14:05:38 +05:30
parent 2eaa1ed3e1
commit 4f238f4a6f
4 changed files with 398 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -267,7 +267,7 @@ const ProcessStepOne = () => {
} }
} else { } else {
if(!accountId || !transactionId) return; if (!accountId || !transactionId) return;
dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
} }
dispatch(showLoader("Processing Message...")); dispatch(showLoader("Processing Message..."));
@ -345,49 +345,59 @@ const ProcessStepOne = () => {
<div className={`relative w-full h-screen bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none overflow-hidden' : ''}`}> <div className={`relative w-full h-screen bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none overflow-hidden' : ''}`}>
{/* Top Navigation - Fixed */} {/* Top Navigation - Fixed */}
<div className='fixed top-0 left-0 right-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'> <div className='fixed top-0 left-0 right-0 w-full bg-white shadow z-50 px-4 py-1.5 lg:py-3'>
<div className='flex items-center gap-2'> <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 flex-wrap'>
{/* Left Section */}
<div className='flex sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto'>
<IoMdClose <IoMdClose
onClick={handleClose} onClick={handleClose}
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 self-start sm:self-auto'
/> />
<p className="text-base font-normal text-gray-700 border-l pl-4 relative">
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? <p className="text-base font-normal text-gray-700 border-l pl-4 relative w-full sm:w-auto">
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? (
<> <>
<input <input
value={templateName} value={templateName}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]" className="w-full sm:w-[250px] px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
/> />
{!isTyping && ( {!isTyping && (
<RiPencilFill className="absolute top-2.5 right-2 text-[17px]" /> <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
)} )}
</> : </>
) : (
"Add Recipient and Message" "Add Recipient and Message"
} )}
</p> </p>
</div> </div>
{/* Right Section */}
<div <div
id="add-tags-btn-step-one" id="add-tags-btn-step-one"
className='flex items-center gap-3'> className='flex sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto '>
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
<button
onClick={() => handleNextClick(true)} onClick={() => handleNextClick(true)}
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer" className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
> >
Save & Close Save & Close
</button>} </button>
)}
<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 cursor-pointer" className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
> >
{signType === SignTypeEnum.selfSign ? "Sign" : "Next"} {signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
</button> </button>
</div>
</div>
</div>
</div>
</div>
{/* Main Content - Scrollable */} {/* Main Content - Scrollable */}
<div className="h-screen pt-[80px] overflow-y-auto no-scrollbar"> <div className="h-screen pt-[80px] overflow-y-auto no-scrollbar">

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

@ -369,15 +369,14 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
ref={formRef} ref={formRef}
onSubmit={handleRecipientAdd} onSubmit={handleRecipientAdd}
id="add-recipient-step-one" id="add-recipient-step-one"
className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-6 py-4 space-y-3 relative" className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-3 sm:px-4 lg:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 relative"
> >
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && ( {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
<div className="space-y-1"> <div className="space-y-2 sm:space-y-3">
{/* Top Row: Role Input + Settings */} {/* Role Name and Permissions Section - Responsive Layout */}
<div className="flex justify-between items-center"> <div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3 lg:gap-4">
{/* Role Name Input */} {/* Role Name Input */}
{/* Role Name Input */} <div className="w-full lg:w-64 xl:w-80">
<div className="w-64">
<input <input
type="text" type="text"
value={recipient.roleName} value={recipient.roleName}
@ -394,18 +393,12 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
)} )}
</div> </div>
{/* Permissions Section */}
{/* Settings + Permissions */} <div className="flex items-center justify-start lg:justify-end">
<div className="flex items-center"> <div className="flex sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
<div className="flex justify-between w-full">
{/* Permission Status Text - Always Visible */}
{/* Permission Controls - Always Visible */}
<div className="max-w-80 opacity-100 overflow-visible">
<div className="flex items-center space-x-3 pr-1.5">
{/* Edit Permission */} {/* Edit Permission */}
<div className="relative group"> <div className="relative group">
<label className="flex items-center gap-1 text-sm text-gray-700"> <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
<input <input
type="checkbox" type="checkbox"
checked={recipient.allowSenderToEdit} checked={recipient.allowSenderToEdit}
@ -414,17 +407,15 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
} }
onFocus={() => setOpenContactModal(true)} onFocus={() => setOpenContactModal(true)}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
className='accent-blue-500' className='accent-blue-500 w-3 h-3 sm:w-4 sm:h-4'
/> />
Allow Edit <span className="whitespace-nowrap">Allow Edit</span>
</label> </label>
{/* Tooltip */}
</div> </div>
{/* Delete Permission */} {/* Delete Permission */}
<div className="relative group"> <div className="relative group">
<label className="flex items-center gap-1 text-sm text-gray-700"> <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
<input <input
type="checkbox" type="checkbox"
checked={recipient.allowSenderToDelete} checked={recipient.allowSenderToDelete}
@ -433,55 +424,44 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
} }
onFocus={() => setOpenContactModal(true)} onFocus={() => setOpenContactModal(true)}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
className="accent-red-500" className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
/> />
Allow Delete <span className="whitespace-nowrap">Allow Delete</span>
</label> </label>
{/* Tooltip */}
{/* <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
<div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
Delete Permission
<div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
</div>
</div> */}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
)} )}
{/* Name Inputs */} {/* Name and Email Inputs - Responsive Grid */}
<div className="grid grid-cols-12 gap-4 mt-3"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-3">
<div className="col-span-4"> {/* First Name */}
<div className="w-full">
<input <input
type="text" type="text"
onFocus={() => handleFocus("firstName")} onFocus={() => handleFocus("firstName")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.firstName} value={recipient.firstName}
placeholder="First Name" placeholder="First Name"
className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`} ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => { onChange={(e) => {
setRecipients({ ...recipient, firstName: e.target.value }); setRecipients({ ...recipient, firstName: e.target.value });
// setErrors((prev) => ({ ...prev, firstName: false }));
}} }}
/> />
</div> </div>
{/* {errors.firstName && (
<p className="text-red-500 text-xs mt-1">First Name is required</p> {/* Last Name */}
)} */} <div className="w-full">
<div className="col-span-4">
<input <input
type="text" type="text"
onFocus={() => handleFocus("lastName")} onFocus={() => handleFocus("lastName")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.lastName} value={recipient.lastName}
placeholder="Last Name" placeholder="Last Name"
className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`} ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => { onChange={(e) => {
setRecipients({ ...recipient, lastName: e.target.value }); setRecipients({ ...recipient, lastName: e.target.value });
@ -492,14 +472,16 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
<p className="text-red-500 text-xs mt-1">Last Name is required</p> <p className="text-red-500 text-xs mt-1">Last Name is required</p>
)} )}
</div> </div>
<div className="col-span-4">
{/* Email - Full width on small screens, shares row on larger */}
<div className="w-full sm:col-span-2 lg:col-span-1">
<input <input
type="email" type="email"
onFocus={() => handleFocus("email")} onFocus={() => handleFocus("email")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.email} value={recipient.email}
placeholder="Recipient Email" placeholder="Recipient Email"
className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`} ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => { onChange={(e) => {
setRecipients({ ...recipient, email: e.target.value }); setRecipients({ ...recipient, email: e.target.value });
@ -512,8 +494,9 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
</div> </div>
</div> </div>
{/* Host Fields for In-Person Signers */}
{recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> {recipient.type === recipientType.INPERSONSIGNER && (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<input <input
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES} required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
type="text" type="text"
@ -521,7 +504,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.hostName} value={recipient.hostName}
placeholder="Host Name" placeholder="Host Name"
className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })} onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
/> />
<input <input
@ -531,14 +514,15 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.hostEmail} value={recipient.hostEmail}
placeholder="Host Email" placeholder="Host Email"
className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })} onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
/> />
</div>} </div>
)}
{/* Contact Modal */} {/* Contact Modal - Responsive Positioning */}
{openContactModal && contactData.contacts.length > 0 && ( {openContactModal && contactData.contacts.length > 0 && (
<div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar"> <div className="absolute z-50 mt-1 w-full sm:w-2/3 lg:w-1/2 xl:w-2/3 max-h-[40vh] sm:max-h-[50vh] bg-white shadow-lg rounded-md p-2 sm:p-3 border border-gray-100 overflow-y-auto no-scrollbar">
<ContactModal <ContactModal
contactData={contactData} contactData={contactData}
inpFirstName={recipient.firstName} inpFirstName={recipient.firstName}
@ -553,36 +537,41 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
</div> </div>
)} )}
{/* Signing Options and Add Button - Responsive Layout */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
{/* Signing options + Add button in one line */} {/* Recipient Type Radio Options */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2 sm:gap-4 lg:gap-6">
<div className="flex flex-wrap gap-6">
{[ {[
{ label: "Signer", value: recipientType.SIGNER }, { label: "Signer", value: recipientType.SIGNER },
{ label: "In Person Signer", value: recipientType.INPERSONSIGNER }, { label: "In Person Signer", value: recipientType.INPERSONSIGNER },
{ label: "CC", value: recipientType.CC }, { label: "CC", value: recipientType.CC },
].map((option) => ( ].map((option) => (
<label key={option.value} className="flex items-center gap-2 text-gray-700 text-sm cursor-pointer"> <label key={option.value} className="flex items-center gap-2 text-gray-700 text-xs sm:text-sm cursor-pointer">
<input <input
type="radio" type="radio"
name="recipient-type" name="recipient-type"
value={option.value} value={option.value}
checked={recipient.type === option.value} 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 w-3 h-3 sm:w-4 sm:h-4"
/> />
{option.label} <span className="whitespace-nowrap">{option.label}</span>
</label> </label>
))} ))}
</div> </div>
{!showCard && <button {/* Add/Edit Button */}
{!showCard && (
<button
type="submit" 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" className="inline-flex items-center justify-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-xs sm:text-sm font-semibold px-4 sm:px-5 py-2 rounded-md transition w-full sm:w-auto min-w-fit"
> >
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"} <FaPlus size={12} className="sm:w-3.5 sm:h-3.5" />
</button>} <span className="whitespace-nowrap">
{editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
</span>
</button>
)}
</div> </div>
</form> </form>
</div> </div>

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

@ -134,7 +134,7 @@ const RecipientCards = ({
const editable = isEditable(recipient); const editable = isEditable(recipient);
return ( return (
<div className="relative inline-block mx-3"> <div className="relative inline-block w-full sm:mx-1 lg:mx-3">
<input <input
type={type} type={type}
value={currentValue || ""} value={currentValue || ""}
@ -148,7 +148,7 @@ const RecipientCards = ({
} }
}} }}
disabled={!editable} disabled={!editable}
className={`w-full px-4 py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-sm ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`} className={`w-full px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-xs sm:text-sm ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`}
title={editable ? "Edit field" : "Editing disabled"} title={editable ? "Edit field" : "Editing disabled"}
/> />
</div> </div>
@ -220,12 +220,12 @@ const RecipientCards = ({
{recipients.length > 0 ? ( {recipients.length > 0 ? (
<> <>
{recipients.length > 1 && ( {recipients.length > 1 && (
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-300"> <div className="flex sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 border-b border-gray-300 gap-2">
<h3 className="text-sm font-semibold text-gray-700"> <h3 className="text-sm font-semibold text-gray-700">
Recipients ({recipients.length}) Recipients ({recipients.length})
</h3> </h3>
<label <label
className="flex items-center gap-2 cursor-pointer select-none" className="flex items-center gap-2 cursor-pointer select-none justify-center sm:justify-end"
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })} onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}
> >
<span className="text-xs font-medium text-gray-600">Signing Order</span> <span className="text-xs font-medium text-gray-600">Signing Order</span>
@ -238,14 +238,16 @@ const RecipientCards = ({
{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-2 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail className={`flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 hover:bg-gray-50 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
? "bg-neutral-100 opacity-40" ? "bg-neutral-100 opacity-40"
: "" : ""
}`} }`}
> >
<div className="flex items-center gap-3 min-w-0"> {/* Main Content Section */}
<div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
{/* Order Number */}
{recipients.length > 1 ? ( {recipients.length > 1 ? (
<div className="relative"> <div className="relative flex-shrink-0">
<input <input
type="number" type="number"
value={recipient.routingOrder || 1} value={recipient.routingOrder || 1}
@ -256,7 +258,7 @@ const RecipientCards = ({
Number(e.target.value) Number(e.target.value)
) )
} }
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100" className="w-8 sm:w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
/> />
</div> </div>
) : ( ) : (
@ -271,25 +273,30 @@ const RecipientCards = ({
Number(e.target.value) Number(e.target.value)
) )
} }
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]" className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
/> />
)} )}
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
{/* Avatar */}
<div className="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)} {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
</div> </div>
<div className="min-w-0">
<div className="grid grid-cols-12 gap-2 mb-2"> {/* Form Fields Section */}
<div className="col-span-6"> <div className="min-w-0 flex-1">
{/* Role Name and Permissions Row */}
<div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
<div className="flex-1 lg:w-1/2">
<p className="font-semibold text-gray-800 text-xs"> <p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "roleName", "Role name")} {renderEditableField(recipient, "roleName", "Role name")}
</p> </p>
</div> </div>
<div className="col-span-6 flex items-center justify-end ">
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
<div className="flex items-center gap-4">
{/* <span className="text-sm text-gray-600">Permissions granted:</span> */}
<label className="flex items-center gap-1 text-sm text-gray-700"> {/* Permissions - Mobile: Below role, Desktop: Right side */}
<div className="lg:w-1/2 lg:flex lg:items-center lg:justify-end">
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
<div className="flex ps-2.5 sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
<label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
<input <input
type="checkbox" type="checkbox"
checked={recipient.allowSenderToEdit} checked={recipient.allowSenderToEdit}
@ -302,12 +309,12 @@ const RecipientCards = ({
}) })
) )
} }
className="accent-blue-500" className="accent-blue-500 w-3 h-3 sm:w-4 sm:h-4"
/> />
Allow Edit <span className="whitespace-nowrap">Allow Edit</span>
</label> </label>
<label className="flex items-center gap-1 text-sm text-gray-700"> <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
<input <input
type="checkbox" type="checkbox"
checked={recipient.allowSenderToDelete} checked={recipient.allowSenderToDelete}
@ -320,35 +327,59 @@ const RecipientCards = ({
}) })
) )
} }
className="accent-red-500" className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
/> />
Allow Delete <span className="whitespace-nowrap">Allow Delete</span>
</label> </label>
</div> </div>
)} )}
</div>
</div>
</div> {/* Name and Email Fields */}
</div> <div className="mb-2">
<div className="grid grid-cols-12 gap-2 mb-2"> {/* Mobile: Stack vertically, Tablet+: Side by side */}
<div className="col-span-12"> <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
<p className="font-semibold text-gray-800 text-xs flex items-center gap-1"> <div className="flex flex-col sm:flex-row gap-1 sm:gap-2 sm:flex-1">
<div className="w-full sm:w-1/2">
<p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "firstName", "First Name")} {renderEditableField(recipient, "firstName", "First Name")}
</p>
</div>
<div className="w-full sm:w-1/2">
<p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "lastName", "Last Name")} {renderEditableField(recipient, "lastName", "Last Name")}
</p>
</div>
</div>
<div className="w-full sm:flex-1">
<p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "email", "Recipient Email", "", "email")} {renderEditableField(recipient, "email", "Recipient Email", "", "email")}
</p> </p>
</div> </div>
</div> </div>
</div>
{/* Host Fields (for In-Person Signers) */}
{recipient.type === recipientType.INPERSONSIGNER && ( {recipient.type === recipientType.INPERSONSIGNER && (
<div className="grid grid-cols-12 gap-2"> <div className="mb-2">
<div className="col-span-12"> <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
<p className="font-semibold text-gray-800 text-xs flex items-center gap-1"> <div className="w-full sm:w-1/2">
<p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "hostName", "Host Name")} {renderEditableField(recipient, "hostName", "Host Name")}
</p>
</div>
<div className="w-full sm:w-1/2">
<p className="font-semibold text-gray-800 text-xs">
{renderEditableField(recipient, "hostEmail", "Host Email", "", "email")} {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
</p> </p>
</div> </div>
</div> </div>
</div>
)} )}
<div className="flex items-center gap-2 my-1.5 mx-2">
{/* Recipient Type Radio Buttons */}
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 my-1.5 mx-1 sm:mx-2">
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
type="radio" type="radio"
@ -360,7 +391,7 @@ const RecipientCards = ({
className="accent-[var(--primary)] w-3 h-3" className="accent-[var(--primary)] w-3 h-3"
disabled={!isEditable(recipient)} disabled={!isEditable(recipient)}
/> />
<span className="text-sm">Signer</span> <span className="text-xs sm:text-sm">Signer</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
@ -373,7 +404,7 @@ const RecipientCards = ({
className="accent-[var(--primary)] w-3 h-3" className="accent-[var(--primary)] w-3 h-3"
disabled={!isEditable(recipient)} disabled={!isEditable(recipient)}
/> />
<span className="text-sm">In Person Signer</span> <span className="text-xs sm:text-sm whitespace-nowrap">In Person Signer</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
@ -386,14 +417,15 @@ const RecipientCards = ({
className="accent-[var(--primary)] w-3 h-3" className="accent-[var(--primary)] w-3 h-3"
disabled={!isEditable(recipient)} disabled={!isEditable(recipient)}
/> />
<span className="text-sm">CC</span> <span className="text-xs sm:text-sm">CC</span>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
{/* Action Buttons */}
{signType !== "self-sign" && ( {signType !== "self-sign" && (
<div className="flex justify-end gap-2 items-center"> <div className="flex justify-end lg:justify-center gap-2 items-center lg:ml-2">
<button <button
type="button" type="button"
title="Remove recipient" title="Remove recipient"
@ -404,9 +436,9 @@ const RecipientCards = ({
? false ? false
: !recipient.newOne && !recipient.allowSenderToDelete : !recipient.newOne && !recipient.allowSenderToDelete
} }
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50" className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50 p-1"
> >
<ImBin size={16} /> <ImBin size={14} className="sm:w-4 sm:h-4" />
</button> </button>
</div> </div>
)} )}
@ -415,26 +447,29 @@ const RecipientCards = ({
</div> </div>
</> </>
) : ( ) : (
<div className="p-6 text-center text-gray-500 font-medium text-sm"> <div className="p-4 sm:p-6 text-center text-gray-500 font-medium text-sm">
No Recipients Added No Recipients Added
</div> </div>
)} )}
{/* Responsive Modal */}
{signingOrderModal.open && ( {signingOrderModal.open && (
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center"> <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center p-4">
<div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto"> <div className="flex-col relative justify-center items-center w-full max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl xl:max-w-4xl max-h-[80vh] sm:max-h-[70vh] lg:max-h-[60vh] h-full overflow-auto">
<div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]"> <div className="p-3 sm:p-4 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
<p className="font-semibold">Signing Order</p> <p className="font-semibold text-sm sm:text-base">Signing Order</p>
<div <div
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })} onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
className="text-xl cursor-pointer hover:text-gray-200 transition-all" className="text-xl sm:text-2xl cursor-pointer hover:text-gray-200 transition-all p-1"
> >
<IoCloseOutline /> <IoCloseOutline />
</div> </div>
</div> </div>
<div className="bg-white rounded-b-lg">
<SigningOrderDiagram signers={recipients} /> <SigningOrderDiagram signers={recipients} />
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
); );

90
src/components/process/processStepOne/SelectedDocuments.tsx
View File

@ -90,15 +90,26 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
// Get proper Tailwind class names for upload card span // Get proper Tailwind class names for upload card span
const getUploadCardSpanClass = () => { const getUploadCardSpanClass = () => {
switch (docCount) { if (docCount === 0) {
case 0: return 'col-span-5'; // Full width when no docs // Upload card takes all columns only when no docs
case 1: return 'col-span-4'; // 4 cols for upload, 1 for doc return "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5";
case 2: return 'col-span-3'; // 3 cols for upload, 2 for docs
case 3: return 'col-span-2'; // 2 cols for upload, 3 for docs
case 4: return 'col-span-1'; // 1 col for upload, 4 for docs
default: return 'col-span-1'; // 1 col for upload, rest for docs
} }
};
switch (docCount) {
case 1:
return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4";
case 2:
return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3";
case 3:
return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2";
case 4:
return "col-span-1"; // balanced
default:
return "col-span-1";
}
};
// Calculate how many documents should be in the first row // Calculate how many documents should be in the first row
const getFirstRowDocCount = () => { const getFirstRowDocCount = () => {
@ -113,9 +124,12 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
return ( return (
<> <>
{/* Upload Card First */} {/* Upload Card First */}
<div className='space-y-3'> <div className="space-y-3">
<div id='upload-doc-step-one' className="grid grid-cols-5 gap-2"> <div
{/* Upload Document Card - Always First */} id="upload-doc-step-one"
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 gap-2"
>
{/* Upload Document Card */}
<div <div
onClick={() => setModalOpen(true)} onClick={() => setModalOpen(true)}
className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`} className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
@ -126,13 +140,10 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
{/* First Row Documents */} {/* First Row Documents */}
<ReactSortable <ReactSortable
className="contents" // Use 'contents' to make children participate in parent grid className="contents"
list={documents.slice(0, firstRowDocCount).map(doc => ({ ...doc }))} list={documents.slice(0, firstRowDocCount).map((doc) => ({ ...doc }))}
setList={(newState) => { setList={(newState) => {
const updatedDocs = [ const updatedDocs = [...newState, ...documents.slice(firstRowDocCount)];
...newState,
...documents.slice(firstRowDocCount)
];
dispatch(setDocuments(updatedDocs)); dispatch(setDocuments(updatedDocs));
}} }}
handle=".drag-handle" handle=".drag-handle"
@ -141,12 +152,13 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
disabled={false} disabled={false}
> >
{documents.slice(0, firstRowDocCount).map((doc) => ( {documents.slice(0, firstRowDocCount).map((doc) => (
<div key={doc.id} className="col-span-1"> <div key={doc.id} className="col-span-1 mx-auto">
<DocumentCard <DocumentCard
id={doc.id} id={doc.id}
name={doc.name} name={doc.name}
isCompleted={ isCompleted={
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) "isCompleted" in doc ||
("status" in doc && doc.status === "UPLOADED")
? true ? true
: false : false
} }
@ -157,15 +169,15 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
</ReactSortable> </ReactSortable>
</div> </div>
{/* Additional Rows - Remaining Documents (5th, 6th, 7th, etc.) */} {/* Additional Rows */}
{remainingDocs > 0 && ( {remainingDocs > 0 && (
<ReactSortable <ReactSortable
className="grid grid-cols-5 gap-2" className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-2"
list={documents.slice(firstRowDocCount).map(doc => ({ ...doc }))} list={documents.slice(firstRowDocCount).map((doc) => ({ ...doc }))}
setList={(newState) => { setList={(newState) => {
const updatedDocs = [ const updatedDocs = [
...documents.slice(0, firstRowDocCount), ...documents.slice(0, firstRowDocCount),
...newState ...newState,
]; ];
dispatch(setDocuments(updatedDocs)); dispatch(setDocuments(updatedDocs));
}} }}
@ -175,12 +187,13 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
disabled={false} disabled={false}
> >
{documents.slice(firstRowDocCount).map((doc) => ( {documents.slice(firstRowDocCount).map((doc) => (
<div key={doc.id} className="col-span-1"> <div key={doc.id} className="col-span-1 mx-auto">
<DocumentCard <DocumentCard
id={doc.id} id={doc.id}
name={doc.name} name={doc.name}
isCompleted={ isCompleted={
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) "isCompleted" in doc ||
("status" in doc && doc.status === "UPLOADED")
? true ? true
: false : false
} }
@ -191,11 +204,10 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
</ReactSortable> </ReactSortable>
)} )}
{/* Modal */} {/* Modal */}
{isModalOpen && ( {isModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-4"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-2 sm:px-4">
<div className="bg-white w-full max-w-5xl h-[500px] rounded-xl shadow-lg flex overflow-hidden relative"> <div className="bg-white w-full h-full sm:max-w-5xl sm:h-[500px] rounded-xl shadow-lg flex flex-col sm:flex-row overflow-hidden relative">
{/* Close Button */} {/* Close Button */}
<button <button
className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2" className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
@ -205,13 +217,13 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
</button> </button>
{/* Sidebar Tabs */} {/* Sidebar Tabs */}
<div className="w-1/4 bg-gray-100 p-4 flex flex-col gap-2 border-r border-gray-200"> <div className="w-full sm:w-1/4 bg-gray-100 p-4 flex flex-row sm:flex-col gap-2 border-b sm:border-b-0 sm:border-r border-gray-200 overflow-x-auto sm:overflow-hidden">
{tabs.map(tab => ( {tabs.map((tab) => (
<button <button
key={tab.name} key={tab.name}
className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition ${activeTab === tab.name className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition whitespace-nowrap ${activeTab === tab.name
? 'bg-white shadow text-[var(--primary)]' ? "bg-white shadow text-[var(--primary)]"
: 'hover:bg-gray-200 text-gray-600' : "hover:bg-gray-200 text-gray-600"
}`} }`}
onClick={() => setActiveTab(tab.name)} onClick={() => setActiveTab(tab.name)}
> >
@ -221,8 +233,8 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
</div> </div>
{/* Modal Content */} {/* Modal Content */}
<div className="w-3/4 p-6 overflow-y-auto"> <div className="w-full sm:w-3/4 p-4 sm:p-6 overflow-y-auto">
{activeTab === 'Upload' && ( {activeTab === "Upload" && (
<div <div
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
onDragOver={(e) => e.preventDefault()} onDragOver={(e) => e.preventDefault()}
@ -230,7 +242,9 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50" className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
> >
<FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" /> <FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
<p className="text-sm text-gray-500 mb-2">Drag & drop files here or</p> <p className="text-sm text-gray-500 mb-2">
Drag & drop files here or
</p>
<button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all"> <button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
Browse Files Browse Files
</button> </button>
@ -244,7 +258,7 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
/> />
</div> </div>
)} )}
{activeTab !== 'Upload' && ( {activeTab !== "Upload" && (
<div className="flex items-center justify-center h-full text-gray-400 text-sm"> <div className="flex items-center justify-center h-full text-gray-400 text-sm">
<p>{activeTab} integration coming soon...</p> <p>{activeTab} integration coming soon...</p>
</div> </div>
@ -253,10 +267,10 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
</div> </div>
</div> </div>
)} )}
</div> </div>
</> </>
); );
}; };