mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-23 16:12:34 +02:00
style: update design of template ui
This commit is contained in:
prafull-opensignlabs
@@ -127,11 +127,10 @@ const LoginFacebook = ({
|
||||
/> */}
|
||||
{isModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
className="modal fade show block z-[1]"
|
||||
id="exampleModal"
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: "block", zIndex: 1 }}
|
||||
>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
@@ -144,11 +143,7 @@ const LoginFacebook = ({
|
||||
<div className="modal-body">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="Phone"
|
||||
style={{ display: "flex" }}
|
||||
className="col-form-label"
|
||||
>
|
||||
<label htmlFor="Phone" className="col-form-label">
|
||||
Phone <span className="text-[red] text-[13px]">*</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -166,11 +161,7 @@ const LoginFacebook = ({
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="Company"
|
||||
style={{ display: "flex" }}
|
||||
className="col-form-label"
|
||||
>
|
||||
<label htmlFor="Company" className="col-form-label">
|
||||
Company <span className="text-[red] text-[13px]">*</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -191,16 +182,14 @@ const LoginFacebook = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSubmitbtn()}
|
||||
className="btn btn-info"
|
||||
style={{ marginRight: 10 }}
|
||||
className="btn btn-info mr-[10px]"
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
className="btn btn-secondary w-[90px]"
|
||||
onClick={() => setIsModal(false)}
|
||||
style={{ width: 90 }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -39,7 +39,7 @@ const GetDashboard = (props) => {
|
||||
<div
|
||||
className={`${
|
||||
col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
|
||||
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
|
||||
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
|
||||
data-tut={col.widget.data.tourSection}
|
||||
>
|
||||
<Suspense
|
||||
@@ -81,7 +81,7 @@ const GetDashboard = (props) => {
|
||||
<div
|
||||
className={`${
|
||||
col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
|
||||
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
|
||||
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
|
||||
>
|
||||
<Suspense fallback={<div>please wait</div>}>
|
||||
<DashboardCard
|
||||
|
||||
@@ -313,32 +313,21 @@ function DriveBody(props) {
|
||||
|
||||
const signersName = () => {
|
||||
const getSignersName = signerExist.map((data) => data.Name);
|
||||
const signerName = getSignersName.join(",");
|
||||
const signerName = getSignersName.join(", ");
|
||||
|
||||
return (
|
||||
<span
|
||||
className="statusSpan"
|
||||
style={{ width: "90%", wordWrap: "break-word" }}
|
||||
>
|
||||
{signerName}{" "}
|
||||
</span>
|
||||
<span className="statusSpan w-[90%] break-words">{signerName}</span>
|
||||
);
|
||||
};
|
||||
return listType === "table" ? (
|
||||
data.Type === "Folder" ? (
|
||||
<tr onClick={() => handleOnclikFolder(data)}>
|
||||
<td
|
||||
style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<td className="cursor-pointer flex items-center">
|
||||
<i
|
||||
className="fa fa-folder"
|
||||
className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
|
||||
aria-hidden="true"
|
||||
style={{ color: "#f0ad26", marginRight: "8px", fontSize: "26px" }}
|
||||
></i>
|
||||
|
||||
<span style={{ fontSize: "12px", fontWeight: "500" }}>
|
||||
{data.Name}
|
||||
</span>
|
||||
<span className="text-[12px] font-medium">{data.Name}</span>
|
||||
</td>
|
||||
<td>_</td>
|
||||
<td>Folder</td>
|
||||
@@ -347,17 +336,9 @@ function DriveBody(props) {
|
||||
</tr>
|
||||
) : (
|
||||
<tr onClick={() => checkPdfStatus(data)}>
|
||||
<td
|
||||
style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<i
|
||||
className="fa fa-file-pdf"
|
||||
style={{ color: "#ed4d0e", marginRight: "8px", fontSize: "26px" }}
|
||||
></i>
|
||||
|
||||
<span style={{ fontSize: "12px", fontWeight: "500" }}>
|
||||
{data.Name}
|
||||
</span>
|
||||
<td className="cursor-pointer flex items-center">
|
||||
<i className="fa fa-file-pdf mr-[8px] text-[26px] text-[#ed4d0e]"></i>
|
||||
<span className="text-[12px] font-medium">{data.Name}</span>
|
||||
</td>
|
||||
<td>{createddate}</td>
|
||||
<td>Pdf</td>
|
||||
@@ -368,9 +349,8 @@ function DriveBody(props) {
|
||||
e.stopPropagation();
|
||||
handleMenuItemClick("Download", data);
|
||||
}}
|
||||
className="fa fa-download"
|
||||
className="fa fa-download mr-[8px] text-[#ed280e]"
|
||||
aria-hidden="true"
|
||||
style={{ color: "#ed280e", marginRight: "8px" }}
|
||||
></i>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -403,12 +383,7 @@ function DriveBody(props) {
|
||||
defaultValue={renameValue}
|
||||
// value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
style={{
|
||||
width: "100px",
|
||||
border: "1.5px solid black",
|
||||
borderRadius: "2px",
|
||||
fontSize: "10px"
|
||||
}}
|
||||
className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
|
||||
/>
|
||||
) : (
|
||||
<span className="foldName">{data.Name}</span>
|
||||
@@ -426,8 +401,8 @@ function DriveBody(props) {
|
||||
onClick={() => handleMenuItemClick("Rename", data)}
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
<i className="fa-solid fa-font"></i>
|
||||
<span style={{ marginLeft: "8px" }}>Rename</span>
|
||||
<i className="fa-solid fa-font mr-[8px]"></i>
|
||||
<span>Rename</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
</ContextMenu.Portal>
|
||||
@@ -464,12 +439,7 @@ function DriveBody(props) {
|
||||
defaultValue={renameValue}
|
||||
// value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
style={{
|
||||
width: "100px",
|
||||
border: "1.5px solid black",
|
||||
borderRadius: "2px",
|
||||
fontSize: "10px"
|
||||
}}
|
||||
className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
|
||||
/>
|
||||
) : (
|
||||
<span className="fileName">{data.Name}</span>
|
||||
@@ -514,7 +484,7 @@ function DriveBody(props) {
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
<i className={menu.icon}></i>
|
||||
<span style={{ marginLeft: "8px" }}>{menu.type}</span>
|
||||
<span className="ml-[8px]">{menu.type}</span>
|
||||
</ContextMenu.Item>
|
||||
);
|
||||
})}
|
||||
@@ -525,21 +495,21 @@ function DriveBody(props) {
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Portal>
|
||||
<HoverCard.Content className="HoverCardContent" sideOffset={5}>
|
||||
<strong style={{ fontSize: "13px" }}>Title: </strong>
|
||||
<strong className="text-[13px]">Title: </strong>
|
||||
<span className="statusSpan" style={{ marginBottom: "0px" }}>
|
||||
{" "}
|
||||
{data.Name}
|
||||
</span>
|
||||
<br />
|
||||
<strong style={{ fontSize: "13px" }}>Status: </strong>
|
||||
<strong className="text-[13px]">Status: </strong>
|
||||
<span className="statusSpan"> {status}</span>
|
||||
<br />
|
||||
<strong style={{ fontSize: "13px" }}>Created Date: </strong>
|
||||
<strong className="text-[13px]">Created Date: </strong>
|
||||
<span className="statusSpan">{createddate}</span>
|
||||
<br />
|
||||
{signerExist && (
|
||||
<>
|
||||
<strong style={{ fontSize: "13px" }}>Signers: </strong>
|
||||
<strong className="text-[13px]">Signers: </strong>
|
||||
{/* <span className="statusSpan">kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb</span> */}
|
||||
{signersName()}
|
||||
</>
|
||||
|
||||
@@ -173,143 +173,59 @@ function EmailComponent({
|
||||
<div className="modaloverlay">
|
||||
<div className="modalcontainer">
|
||||
{isLoading && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
zIndex: "20",
|
||||
backgroundColor: "#e6f2f2",
|
||||
opacity: 0.8
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt="no img"
|
||||
src={loader}
|
||||
style={{ width: "70px", height: "70px" }}
|
||||
/>
|
||||
<span style={{ fontSize: "12px", fontWeight: "bold" }}>
|
||||
<div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
|
||||
<img alt="loader" src={loader} className="w-[70px] h-[70px]" />
|
||||
<span className="text-[12px] font-bold">
|
||||
This might take some time
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ background: "#32a3ac" }} className="modalheader">
|
||||
<span style={{ color: "white" }}>Successfully signed!</span>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<span className="text-white">Successfully signed!</span>
|
||||
<div className="flex flex-row">
|
||||
<div></div>
|
||||
{!isAndroid && (
|
||||
<button
|
||||
onClick={handleToPrint}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
}}
|
||||
className="btn btn-primary btn-sm"
|
||||
className="op-btn op-btn-neutral op-btn-sm text-[15px]"
|
||||
>
|
||||
<i
|
||||
className="fa fa-print"
|
||||
style={{
|
||||
fontSize: "15px",
|
||||
marginRight: "3px",
|
||||
color: "white"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<i className="fa fa-print" aria-hidden="true"></i>
|
||||
Print
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
|
||||
onClick={() => handleDownloadPdf()}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="fa fa-download"
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "15px",
|
||||
marginRight: "3px"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<i className="fa fa-download" aria-hidden="true"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="h-full p-[20px]">
|
||||
{isEmailCelebration && (
|
||||
<div className="absolute w-[100%] flex justify-center items-center">
|
||||
<img
|
||||
alt="print img"
|
||||
width={300}
|
||||
height={250}
|
||||
src={celebration}
|
||||
/>
|
||||
<img alt="celeb" width={300} height={250} src={celebration} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "system-ui",
|
||||
verticalAlign: "baseline",
|
||||
fontWeight: "500",
|
||||
color: "#403f3e",
|
||||
fontSize: "15px",
|
||||
marginBottom: "5px"
|
||||
}}
|
||||
>
|
||||
<p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
|
||||
Recipients added here will get a copy of the signed document.
|
||||
</p>
|
||||
{emailList.length > 0 ? (
|
||||
<>
|
||||
<div className="addEmail">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
|
||||
flexWrap: "wrap"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{emailList.map((data, ind) => {
|
||||
return (
|
||||
<div
|
||||
className="emailChip"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
}}
|
||||
className="flex flex-row items-center bg-[#47a3ad] m-[4px] rounded-md py-[5px] px-[10px]"
|
||||
key={ind}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "13px"
|
||||
}}
|
||||
>
|
||||
<span className="text-white text-[13px]">
|
||||
{data}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
marginLeft: 7,
|
||||
cursor: "pointer"
|
||||
}}
|
||||
className="text-white text-[13px] font-semibold ml-[7px] cursor-pointer"
|
||||
onClick={() => removeChip(ind)}
|
||||
>
|
||||
<i className="fa-solid fa-xmark"></i>
|
||||
@@ -322,7 +238,7 @@ function EmailComponent({
|
||||
<input
|
||||
type="text"
|
||||
value={emailValue}
|
||||
className="addEmailInput"
|
||||
className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-white outline-none"
|
||||
onChange={handleEmailValue}
|
||||
onKeyDown={handleEnterPress}
|
||||
onBlur={() => {
|
||||
@@ -340,7 +256,7 @@ function EmailComponent({
|
||||
<input
|
||||
type="text"
|
||||
value={emailValue}
|
||||
className="emailInput"
|
||||
className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-white border-2 border-[#47a3ad]"
|
||||
onChange={handleEmailValue}
|
||||
onKeyDown={handleEnterPress}
|
||||
placeholder="Add the email addresses"
|
||||
@@ -353,67 +269,36 @@ function EmailComponent({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
cursor: emailValue && "pointer"
|
||||
}}
|
||||
<button
|
||||
className={`${
|
||||
emailValue ? "cursor-pointer" : "cursor-default"
|
||||
} op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
|
||||
onClick={() => {
|
||||
if (emailValue) {
|
||||
handleEnterPress("add");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{
|
||||
backgroundColor: themeColor,
|
||||
padding: "5px 7px",
|
||||
marginTop: "10px",
|
||||
color: "white",
|
||||
borderRadius: "2px"
|
||||
}}
|
||||
className="fa fa-plus"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
<i className="fa fa-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: "#e3e2e1",
|
||||
marginTop: "10px",
|
||||
padding: "5px",
|
||||
borderRadius: "3px"
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: "700" }}>Note:</span>
|
||||
<span style={{ fontSize: "15px" }}>
|
||||
{" "}
|
||||
<div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
|
||||
<span className="font-bold">Note: </span>
|
||||
<span className="text-[15px]">
|
||||
You can only send to ten recipients at a time.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
disabled={emailList.length === 0 && true}
|
||||
style={{
|
||||
background: themeColor,
|
||||
color: "white"
|
||||
}}
|
||||
type="button"
|
||||
className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
|
||||
onClick={() => sendEmail()}
|
||||
className="op-btn op-btn-primary"
|
||||
onClick={() => emailList.length > 0 && sendEmail()}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="finishBtn cancelBtn"
|
||||
className="op-btn op-btn-ghost ml-2"
|
||||
onClick={() => {
|
||||
setIsEmail(false);
|
||||
setEmailValue("");
|
||||
|
||||
@@ -102,16 +102,10 @@ function Header({
|
||||
handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<i
|
||||
className="fa fa-arrow-down"
|
||||
className="fa fa-arrow-down mr-[2px]"
|
||||
aria-hidden="true"
|
||||
style={{ marginRight: "2px" }}
|
||||
></i>
|
||||
Download
|
||||
</div>
|
||||
@@ -126,15 +120,9 @@ function Header({
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: "none",
|
||||
backgroundColor: "#fff"
|
||||
}}
|
||||
>
|
||||
<div className="border-none bg-[#fff]">
|
||||
<i
|
||||
className="fa-solid fa-award"
|
||||
style={{ marginRight: "2px" }}
|
||||
className="fa-solid fa-award mr-[2px]"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
Certificate
|
||||
@@ -146,15 +134,9 @@ function Header({
|
||||
className="DropdownMenuItem"
|
||||
onClick={() => setIsEmail(true)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<i
|
||||
className="fa fa-envelope"
|
||||
style={{ marginRight: "2px" }}
|
||||
className="fa fa-envelope mr-[2px]"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
Mail
|
||||
@@ -167,16 +149,10 @@ function Header({
|
||||
handleToPrint(e, pdfUrl, setIsDownloading)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<i
|
||||
className="fa fa-print"
|
||||
className="fa fa-print mr-[2px]"
|
||||
aria-hidden="true"
|
||||
style={{ marginRight: "2px" }}
|
||||
></i>
|
||||
Print
|
||||
</div>
|
||||
@@ -285,12 +261,12 @@ function Header({
|
||||
signersdata.length !== filterPrefill.length && (
|
||||
<div>
|
||||
{filterPrefill.length === 0 ? (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
<span className="text-[13px] text-[#f5405e]">
|
||||
Add {signersdata.length - filterPrefill.length}{" "}
|
||||
recipients signature
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
<span className="text-[13px] text-[#f5405e]">
|
||||
Add {signersdata.length - filterPrefill.length} more
|
||||
recipients signature
|
||||
</span>
|
||||
@@ -310,18 +286,14 @@ function Header({
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
|
||||
className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
disabled={isMailSend && true}
|
||||
data-tut="reactourFour"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] font-[500] text-sm mr-[5px]"
|
||||
style={{
|
||||
background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
|
||||
color: isMailSend ? "rgb(77, 75, 75)" : "white"
|
||||
}}
|
||||
className="op-btn op-btn-primary op-btn-sm mr-[5px]"
|
||||
onClick={() => alertSendEmail()}
|
||||
>
|
||||
{completeBtnTitle
|
||||
@@ -438,40 +410,37 @@ function Header({
|
||||
onClick={() =>
|
||||
handleDownloadCertificate(pdfDetails, setIsDownloading)
|
||||
}
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
|
||||
className="op-btn op-btn-secondary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
|
||||
>
|
||||
<i
|
||||
className="fa-solid fa-award py-[3px]"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span className="hidden lg:block ml-1">Certificate</span>
|
||||
<i className="fa-solid fa-award" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block">Certificate</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
|
||||
className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
|
||||
>
|
||||
<i className="fa fa-print py-[3px]" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block ml-1">Print</span>
|
||||
<i className="fa fa-print" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block">Print</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
|
||||
className="op-btn op-btn-primary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
|
||||
onClick={() =>
|
||||
handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
|
||||
}
|
||||
>
|
||||
<i className="fa fa-download py-[3px]" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block ml-1">Download</span>
|
||||
<i className="fa fa-download" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block">Download</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#3ba7e5]"
|
||||
className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
|
||||
onClick={() => setIsEmail(true)}
|
||||
>
|
||||
<i className="fa fa-envelope py-[3px]" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block ml-1">Mail</span>
|
||||
<i className="fa fa-envelope" aria-hidden="true"></i>
|
||||
<span className="hidden lg:block">Mail</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
@@ -479,13 +448,13 @@ function Header({
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
|
||||
className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
|
||||
className="op-btn op-btn-primary op-btn-sm mr-[5px]"
|
||||
onClick={() => {
|
||||
if (!pdfUrl) {
|
||||
embedWidgetsData();
|
||||
@@ -499,11 +468,8 @@ function Header({
|
||||
</div>
|
||||
)}
|
||||
{isDownloading === "pdf" && (
|
||||
<div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
|
||||
<div
|
||||
style={{ fontSize: "45px", color: "#3dd3e0" }}
|
||||
className="loader-37"
|
||||
></div>
|
||||
<div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
|
||||
<div className="loader-37"></div>
|
||||
</div>
|
||||
)}
|
||||
<ModalUi
|
||||
|
||||
@@ -21,6 +21,7 @@ const RecipientList = (props) => {
|
||||
marginTop: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
borderRadius: 12,
|
||||
borderBottom: "1px solid #e3e1e1",
|
||||
alignItems: "center"
|
||||
};
|
||||
@@ -141,14 +142,7 @@ const RecipientList = (props) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row items-center w-full">
|
||||
<div
|
||||
style={{
|
||||
background: obj?.blockColor
|
||||
|
||||
@@ -215,18 +215,16 @@ function RenderPdf({
|
||||
const handleAllUserName = (Id, Role, type) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
<div className="text-black text-[8px] font-medium">
|
||||
{
|
||||
pdfDetails[0].Signers?.find(
|
||||
(signer) => signer.objectId === data.signerObjId
|
||||
)?.Name
|
||||
}
|
||||
</div>
|
||||
{type && (
|
||||
<div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
|
||||
)}
|
||||
{type && <div className="text-[11px] font-bold">{type}</div>}
|
||||
{Role && (
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
<div className="text-black text-[8px] font-medium">
|
||||
{`(${Role})`}
|
||||
</div>
|
||||
)}
|
||||
@@ -290,14 +288,12 @@ function RenderPdf({
|
||||
if (checkSign?.Name) {
|
||||
return (
|
||||
<>
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
<div className="text-black text-[8px] font-medium">
|
||||
{checkSign?.Name}
|
||||
</div>
|
||||
{type && (
|
||||
<div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
|
||||
)}
|
||||
{type && <div className="text-[11px] font-bold">{type}</div>}
|
||||
{Role && (
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
<div className="text-black text-[8px] font-medium">
|
||||
{`(${Role})`}
|
||||
</div>
|
||||
)}
|
||||
@@ -306,24 +302,16 @@ function RenderPdf({
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{type && (
|
||||
<div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
|
||||
)}
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
{Role}
|
||||
</div>
|
||||
{type && <div className="text-[11px] font-bold">{type}</div>}
|
||||
<div className="text-black text-[8px] font-medium">{Role}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{type && (
|
||||
<div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
|
||||
)}
|
||||
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
|
||||
{Role}
|
||||
</div>
|
||||
{type && <div className="text-[11px] font-bold">{type}</div>}
|
||||
<div className="text-black text-[8px] font-medium">{Role}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -462,13 +450,7 @@ function RenderPdf({
|
||||
}))}
|
||||
|
||||
{/* this component for render pdf document is in middle of the component */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<Document
|
||||
onLoadError={() => {
|
||||
setPdfLoadFail(true);
|
||||
|
||||
@@ -6,33 +6,18 @@ import { Tooltip } from "react-tooltip";
|
||||
function SignerListPlace(props) {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="pt-2 pb-1 px-3 font-semibold text-base-content "
|
||||
// style={{
|
||||
// background: themeColor,
|
||||
// padding: "5px"
|
||||
// }}
|
||||
>
|
||||
<span className=" relative">
|
||||
<div className="pt-2 pb-1 px-3 font-semibold text-base-content">
|
||||
<span>
|
||||
{props.title ? props.title : "Recipients"}
|
||||
<span className="absolute text-xs z-[30] mt-1 ml-0.5">
|
||||
<span className="text-xs mt-1 ml-0.5">
|
||||
{props?.title === "Roles" && (
|
||||
<>
|
||||
<a data-tooltip-id="my-tooltip">
|
||||
<sup>
|
||||
<i
|
||||
className="fa-solid fa-question rounded-full"
|
||||
style={{
|
||||
borderColor: "white",
|
||||
color: "white",
|
||||
fontSize: 11,
|
||||
borderWidth: 1.5,
|
||||
padding: "1px 3px"
|
||||
}}
|
||||
></i>
|
||||
<i className="fa-solid fa-question rounded-full border-[1.5px] border-base-content text-[11px] py-[1px] px-[3px]"></i>
|
||||
</sup>
|
||||
</a>
|
||||
<Tooltip id="my-tooltip">
|
||||
<Tooltip id="my-tooltip" className="z-[100]">
|
||||
<div className="max-w-[450px]">
|
||||
<p className="font-bold">What are template roles?</p>
|
||||
<p>
|
||||
@@ -74,29 +59,23 @@ function SignerListPlace(props) {
|
||||
</div>
|
||||
{props.handleAddSigner ? (
|
||||
<div
|
||||
role="button"
|
||||
data-tut="reactourAddbtn"
|
||||
className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
|
||||
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
|
||||
disabled={props?.isMailSend ? true : false}
|
||||
onClick={() => props.handleAddSigner()}
|
||||
style={{
|
||||
opacity: props.isMailSend && "0.5",
|
||||
pointerEvents: props.isMailSend && "none"
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
<i className="fa-solid fa-plus"></i> Add role
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
role="button"
|
||||
data-tut="reactourAddbtn"
|
||||
className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
|
||||
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
|
||||
disabled={props?.isMailSend ? true : false}
|
||||
onClick={() => props.setIsAddSigner(true)}
|
||||
style={{
|
||||
opacity: props.isMailSend && "0.5",
|
||||
pointerEvents: props.isMailSend && "none"
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add recipients</span>
|
||||
<i className="fa-solid fa-plus"></i> Add recipients
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -323,16 +323,11 @@ function WidgetComponent({
|
||||
{handleAddSigner ? (
|
||||
<div
|
||||
data-tut="reactourAddbtn"
|
||||
style={{
|
||||
margin: "5px 0 5px 0",
|
||||
backgroundColor: themeColor,
|
||||
color: "white"
|
||||
}}
|
||||
className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
|
||||
className="op-btn op-btn-primary w-full my-[2px]"
|
||||
onClick={() => handleAddSigner()}
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
<span>Add role</span>
|
||||
</div>
|
||||
) : (
|
||||
setIsAddSigner && (
|
||||
@@ -354,19 +349,9 @@ function WidgetComponent({
|
||||
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
style={{
|
||||
background: "white",
|
||||
borderTop: `2px solid ${themeColor}`
|
||||
}}
|
||||
className="bg-white border-[2px] border-t-primary"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
overflowX: "scroll",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "10px 5px 10px 1px"
|
||||
}}
|
||||
>
|
||||
<div className="flex whitespace-nowrap overflow-x-scroll py-[10px] pr-[5px]">
|
||||
<WidgetList
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
@@ -403,7 +388,7 @@ function WidgetComponent({
|
||||
</div>
|
||||
|
||||
{/* <div className="flex flex-col w-full h-auto my-3 items-center"> */}
|
||||
<div className="signLayoutContainer1">
|
||||
<div className="flex flex-col items-center my-3">
|
||||
<WidgetList
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
|
||||
@@ -4,9 +4,9 @@ import { getWidgetType } from "../../constant/Utils";
|
||||
function WidgetList(props) {
|
||||
return props.updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div key={ind} style={{ marginBottom: "5px" }}>
|
||||
<div key={ind} className="mb-[5px]">
|
||||
<div
|
||||
className="widgets"
|
||||
className="select-none"
|
||||
onClick={() => {
|
||||
props.addPositionOfSignature &&
|
||||
props.addPositionOfSignature("onclick", item);
|
||||
|
||||
@@ -376,40 +376,21 @@ export const addWidgetOptions = (type) => {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
export const getWidgetType = (item, marginLeft) => {
|
||||
export const getWidgetType = (item) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="border-2 border-accent rounded-md flex justify-between w-fit md:w-[150px] ml-1 select-none"
|
||||
// className="signatureBtn widgets"
|
||||
style={{
|
||||
marginLeft: marginLeft && `${marginLeft}px`
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center mr-1">
|
||||
{!isMobile && (
|
||||
<i
|
||||
className="fa-sharp fa-solid fa-grip-vertical"
|
||||
style={{ fontSize: "13px", marginLeft: 4 }}
|
||||
></i>
|
||||
)}
|
||||
<span className=" font-[400] text-[15px] text-base-content ml-[5px]">
|
||||
<div className="op-btn op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] w-fit md:w-[150px] ml-[6px] md:ml-0 p-0 overflow-hidden">
|
||||
<div className="w-full h-full flex md:justify-between items-center">
|
||||
<div className="flex justify-start items-center text-[13px] ml-1">
|
||||
{!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
|
||||
<span className="text-center text-[15px] ml-[5px] font-semibold">
|
||||
{item.type}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className=" bg-accent flex items-center px-[5px]"
|
||||
// style={{
|
||||
// backgroundColor: themeColor,
|
||||
// padding: "0 5px",
|
||||
// display: "flex",
|
||||
// alignItems: "center"
|
||||
// }}
|
||||
>
|
||||
<i style={{ fontSize: item.iconSize }} className={item.icon}></i>
|
||||
<div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1099,32 +1099,15 @@ function SignYourSelf() {
|
||||
) : (
|
||||
<div>
|
||||
{isUiLoading && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
height: "100vh",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
zIndex: "999",
|
||||
backgroundColor: "#e6f2f2",
|
||||
opacity: 0.8
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt="no img"
|
||||
src={loader}
|
||||
style={{ width: "100px", height: "100px" }}
|
||||
/>
|
||||
<span style={{ fontSize: "13px", fontWeight: "bold" }}>
|
||||
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
|
||||
<img alt="loader" src={loader} className="w-[100px] h-[100px]" />
|
||||
<span className="font-bold text-[13px]">
|
||||
This might take some time
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isCelebration && (
|
||||
<div style={{ position: "relative", zIndex: "999" }}>
|
||||
<div className="relative z-[999]">
|
||||
<Confetti width={window.innerWidth} height={window.innerHeight} />
|
||||
</div>
|
||||
)}
|
||||
@@ -1184,7 +1167,7 @@ function SignYourSelf() {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="p-[20px] h-full">
|
||||
<p>{isAlert.alertMessage}</p>
|
||||
</div>
|
||||
</ModalUi>
|
||||
@@ -1197,20 +1180,11 @@ function SignYourSelf() {
|
||||
setShowAlreadySignDoc({ status: false });
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="p-[20px] h-full">
|
||||
<p>{showAlreadySignDoc.mssg}</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
className="finishBtn cancelBtn"
|
||||
className="op-btn op-btn-ghost shadow-md"
|
||||
onClick={() => setShowAlreadySignDoc({ status: false })}
|
||||
>
|
||||
Close
|
||||
@@ -1376,24 +1350,16 @@ function SignYourSelf() {
|
||||
setValidateAlert(false);
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="p-[20px] h-full">
|
||||
<p>
|
||||
The input does not meet the criteria set by the regular expression.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
onClick={() => setValidateAlert(false)}
|
||||
type="button"
|
||||
className="finishBtn cancelBtn"
|
||||
className="op-btn op-btn-ghost shadow-md"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
@@ -3,7 +3,7 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import "../styles/signature.css";
|
||||
import { isEnableSubscription, themeColor } from "../constant/const";
|
||||
import { isEnableSubscription } from "../constant/const";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { useDrag, useDrop } from "react-dnd";
|
||||
@@ -1291,15 +1291,9 @@ const TemplatePlaceholder = () => {
|
||||
{currentEmail.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleCreateDocModal();
|
||||
}}
|
||||
style={{
|
||||
background: themeColor,
|
||||
color: "white"
|
||||
}}
|
||||
onClick={() => handleCreateDocModal()}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
@@ -1308,7 +1302,7 @@ const TemplatePlaceholder = () => {
|
||||
setIsCreateDocModal(false);
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn cancelBtn"
|
||||
className="op-btn op-btn-secondary ml-2"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
@@ -1486,10 +1480,10 @@ const TemplatePlaceholder = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="w-[180px] bg-base-100 h-full">
|
||||
<div className="w-[180px] h-full bg-base-100">
|
||||
<div
|
||||
style={{ maxHeight: window.innerHeight - 70 + "px" }}
|
||||
className="autoSignScroll hide-scrollbar"
|
||||
className="overflow-y-auto hide-scrollbar"
|
||||
>
|
||||
<SignerListPlace
|
||||
isMailSend={isMailSend}
|
||||
|
||||
@@ -959,7 +959,7 @@ const ReportTable = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<table className="op-table op-table-zebra border-collapse">
|
||||
<table className="op-table op-table-zebra border-collapse h-[317px]">
|
||||
<thead className="text-[14px]">
|
||||
<tr className="border-y-[1px]">
|
||||
{props.heading?.map((item, index) => (
|
||||
@@ -1038,11 +1038,15 @@ const ReportTable = (props) => {
|
||||
{props.heading.includes("Sr.No") && (
|
||||
<th className="px-4 py-2">{startIndex + index + 1}</th>
|
||||
)}
|
||||
<td className="px-4 py-2 font-semibold w-56">
|
||||
<td className="px-4 py-2 font-semibold min-w-56">
|
||||
{item?.Name}{" "}
|
||||
</td>
|
||||
{props.heading.includes("Note") && (
|
||||
<td className="px-4 py-2">{item?.Note || "-"}</td>
|
||||
<td className="px-4 py-2">
|
||||
{item?.Note?.length > 25
|
||||
? item?.Note?.slice(0, 25) + "..."
|
||||
: item?.Note || "-"}
|
||||
</td>
|
||||
)}
|
||||
{props.heading.includes("Folder") && (
|
||||
<td className="px-4 py-2">
|
||||
@@ -1245,7 +1249,7 @@ const ReportTable = (props) => {
|
||||
act.action !== "option"
|
||||
? `${
|
||||
act?.btnColor ? act.btnColor : ""
|
||||
} op-btn op-btn-sm`
|
||||
} op-btn op-btn-sm mr-1`
|
||||
: "text-base-content focus:outline-none text-lg mr-2 relative"
|
||||
}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user