Skip to content

Commit e0ccf04

Browse files
nxglabsnxglabs
authored
Merge pull request #734 from OpenSignLabs/staging
v1.7.0
2 parents 498bd18 + b202d78 commit e0ccf04

20 files changed

+822
-259
lines changed

‎apps/OpenSign/package-lock.json‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/OpenSign/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"react-helmet": "^6.1.0",
2929
"react-konva": "^18.2.10",
3030
"react-modal": "^3.16.1",
31-
"react-pdf": "^7.7.1",
31+
"react-pdf": "^7.7.3",
3232
"react-quill": "^2.0.0",
3333
"react-redux": "^9.1.0",
3434
"react-rnd": "^10.4.10",

‎apps/OpenSign/src/components/pdf/RenderAllPdfPage.js‎

Lines changed: 64 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import RSC from "react-scrollbars-custom";
33
import { Document, Page } from "react-pdf";
44
import { themeColor } from "../../constant/const";
@@ -9,13 +9,54 @@ function RenderAllPdfPage({
99
setAllPages,
1010
setPageNumber,
1111
setSignBtnPosition,
12-
pageNumber
12+
pageNumber,
13+
signerPos,
14+
signerObjectId
1315
}) {
16+
const [signPageNumber, setSignPageNumber] = useState([]);
17+
const [bookmarkColor, setBookmarkColor] = useState("");
1418
//set all number of pages after load pdf
1519
function onDocumentLoad({ numPages }) {
1620
setAllPages(numPages);
21+
//check if signerPos array exist then save page number exist in signerPos array to show bookmark icon
22+
if (signerPos) {
23+
const checkUser = signerPos.filter(
24+
(data) => data.signerObjId === signerObjectId
25+
);
26+
setBookmarkColor(checkUser[0]?.blockColor);
27+
let pageNumberArr = [];
28+
if (checkUser?.length > 0) {
29+
checkUser[0]?.placeHolder?.map((data) => {
30+
pageNumberArr.push(data?.pageNumber);
31+
});
32+
33+
setSignPageNumber(pageNumberArr);
34+
}
35+
}
1736
}
1837

38+
//'function `addSignatureBookmark` is used to display the page where the user's signature is located.
39+
const addSignatureBookmark = (index) => {
40+
const ispageNumber = signPageNumber.includes(index + 1);
41+
return (
42+
ispageNumber && (
43+
<div
44+
style={{
45+
position: "absolute",
46+
zIndex: 2,
47+
top: -12,
48+
right: -7,
49+
transform: "translate(50% -50%)"
50+
}}
51+
>
52+
<i
53+
style={{ color: bookmarkColor || "red" }}
54+
className="fa-solid fa-bookmark"
55+
></i>
56+
</div>
57+
)
58+
);
59+
};
1960
return (
2061
<div className="showPages">
2162
<div
@@ -66,7 +107,8 @@ function RenderAllPdfPage({
66107
display: "flex",
67108
justifyContent: "center",
68109
alignItems: "center",
69-
contain: "content"
110+
111+
position: "relative"
70112
}}
71113
onClick={() => {
72114
setPageNumber(index + 1);
@@ -75,15 +117,25 @@ function RenderAllPdfPage({
75117
}
76118
}}
77119
>
78-
<Page
79-
key={`page_${index + 1}`}
80-
pageNumber={index + 1}
81-
width={100}
82-
height={100}
83-
scale={1}
84-
renderAnnotationLayer={false}
85-
renderTextLayer={false}
86-
/>
120+
{signerPos && addSignatureBookmark(index)}
121+
122+
<div
123+
style={{
124+
position: "relative",
125+
zIndex: 1,
126+
overflow: "hidden"
127+
}}
128+
>
129+
<Page
130+
key={`page_${index + 1}`}
131+
pageNumber={index + 1}
132+
width={100}
133+
height={100}
134+
scale={1}
135+
renderAnnotationLayer={false}
136+
renderTextLayer={false}
137+
/>
138+
</div>
87139
</div>
88140
))}
89141
</Document>

‎apps/OpenSign/src/components/shared/fields/SelectFolder.js‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -169,32 +169,40 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
169169
{required && <span className="text-red-500 text-[13px]">*</span>}
170170
</label>
171171
</div>
172-
<div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
173-
<div>
174-
<i
175-
className="far fa-folder-open text-[40px] text-[#33bbff]"
176-
style={{ fontSize: "40px" }}
177-
aria-hidden="true"
178-
></i>
179-
</div>
180-
<div className="font-semibold ">
181-
<div className="flex items-center gap-2">
182-
<p>
183-
{selectFolder && selectFolder.Name
184-
? selectFolder.Name
185-
: "OpenSign™ Drive"}
186-
</p>
187-
<div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
188-
<i
189-
className="fa fa-pencil"
190-
title="Select Folder"
191-
aria-hidden="true"
192-
></i>
172+
<div className="relative max-w-sm">
173+
<div
174+
onClick={() => SetIsOpen(true)}
175+
className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
176+
>
177+
<div>
178+
<i
179+
className="far fa-folder-open text-[40px] text-[#33bbff]"
180+
style={{ fontSize: "40px" }}
181+
aria-hidden="true"
182+
></i>
183+
</div>
184+
<div className="font-semibold ">
185+
<div className="flex items-center gap-2">
186+
<p>
187+
{selectFolder && selectFolder.Name
188+
? selectFolder.Name
189+
: "OpenSign™ Drive"}
190+
</p>
191+
<div
192+
className="text-black text-sm"
193+
// onClick={() => SetIsOpen(true)}
194+
>
195+
<i
196+
className="fa fa-pencil cursor-pointer"
197+
title="Select Folder"
198+
aria-hidden="true"
199+
></i>
200+
</div>
193201
</div>
202+
<p className="text-[10px] text-gray-400">
203+
{selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
204+
</p>
194205
</div>
195-
<p className="text-[10px] text-gray-400">
196-
{selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
197-
</p>
198206
</div>
199207
<div className="absolute top-2 right-1 cursor-pointer">
200208
<Tooltip

‎apps/OpenSign/src/pages/Form.js‎

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { PDFDocument } from "pdf-lib";
1616
import axios from "axios";
1717
import { isEnableSubscription, submitBtn } from "../constant/const";
1818
import ModalUi from "../primitives/ModalUi";
19+
import { Tooltip } from "react-tooltip";
1920

2021
// `Form` render all type of Form on this basis of their provided in path
2122
function Form() {
@@ -707,12 +708,13 @@ const Forms = (props) => {
707708
required
708709
/>
709710
</div>
710-
<SelectFolder
711-
onSuccess={handleFolder}
712-
folderCls={props.Cls}
713-
isReset={isReset}
714-
/>
715-
711+
{props.title !== "New Template" && (
712+
<SelectFolder
713+
onSuccess={handleFolder}
714+
folderCls={props.Cls}
715+
isReset={isReset}
716+
/>
717+
)}
716718
{props.title === "Request Signatures" && (
717719
<div className="text-xs mt-2">
718720
<label className="block">
@@ -731,7 +733,66 @@ const Forms = (props) => {
731733
)}
732734
{props.title !== "Sign Yourself" && (
733735
<div className="text-xs mt-2">
734-
<label className="block">Send In Order</label>
736+
<label className="block">
737+
Send In Order
738+
<a data-tooltip-id="sendInOrder-tooltip" className="ml-1">
739+
<sup>
740+
<i
741+
className="fa-solid fa-question rounded-full"
742+
style={{
743+
borderColor: "#33bbff",
744+
color: "#33bbff",
745+
fontSize: 13,
746+
borderWidth: 1.5,
747+
padding: "1.5px 4px"
748+
}}
749+
></i>
750+
</sup>
751+
</a>
752+
<Tooltip id="sendInOrder-tooltip" className="z-50">
753+
<div className="max-w-[200px] md:max-w-[450px]">
754+
<p className="font-bold">Send in Order</p>
755+
<p>
756+
Choose how you want the signing requests to be sent to
757+
the document signers:
758+
</p>
759+
<p className="p-[5px]">
760+
<ol className="list-disc">
761+
<li>
762+
<span className="font-bold">Yes:</span>
763+
<span>
764+
{" "}
765+
Selecting this option will send the signing
766+
request to the first signer initially. Once the
767+
first signer completes their part, the next signer
768+
in the sequence will receive the request. This
769+
process continues until all signers have signed
770+
the document. This method ensures that the
771+
document is signed in a specific order.
772+
</span>
773+
</li>
774+
<li>
775+
<span className="font-bold">No: </span>
776+
<span>
777+
Selecting this option will send the signing links
778+
to all signers simultaneously. Every signer can
779+
sign the document at their convenience, regardless
780+
of whether other signers have completed their
781+
signatures. This method is faster but does not
782+
enforce any signing order among the participants.
783+
</span>
784+
</li>
785+
</ol>
786+
</p>
787+
788+
<p>
789+
Select the option that best suits the needs of your
790+
document processing.
791+
</p>
792+
</div>
793+
</Tooltip>
794+
</label>
795+
735796
<div className="flex items-center gap-2 ml-2 mb-1">
736797
<input
737798
type="radio"

0 commit comments

Comments
 (0)