Skip to content

Commit 6c565a1

Browse files
fix need your sign report document signature issue (#183)
1 parent edecf3e commit 6c565a1

File tree

5 files changed

+152
-77
lines changed

5 files changed

+152
-77
lines changed

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,6 @@ function PdfRequestFiles() {
192192

193193
//check document is signed or not
194194
if (checkDocIdExist && checkDocIdExist.length > 0) {
195-
setAlreadySign(true);
196195
setIsDocId(true);
197196
const signerRes = res[0].Signers;
198197
//comparison auditTrail user details with signers user details

microfrontends/SignDocuments/src/Component/component/header.js

Lines changed: 118 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ function Header({
2727
signersdata,
2828
isMailSend,
2929
alertSendEmail,
30-
isSigned,
3130
isCompleted,
3231
isShowHeader,
3332
decline,
3433
currentSigner,
3534
dataTut4,
36-
alreadySign
35+
alreadySign,
36+
isSignYourself
3737
}) {
3838
const isMobile = window.innerWidth < 767;
3939
const navigate = useNavigate();
@@ -61,12 +61,19 @@ function Header({
6161

6262
const pdf = await getBase64FromUrl(pdfUrl);
6363
const isAndroidDevice = navigator.userAgent.match(/Android/i);
64-
const isAppleDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) && !window.MSStream
64+
const isAppleDevice =
65+
(/iPad|iPhone|iPod/.test(navigator.platform) ||
66+
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
67+
!window.MSStream;
6568
if (isAndroidDevice || isAppleDevice) {
66-
const byteArray = Uint8Array.from(atob(pdf).split('').map(char => char.charCodeAt(0)));
67-
const blob = new Blob([byteArray], { type: 'application/pdf' });
69+
const byteArray = Uint8Array.from(
70+
atob(pdf)
71+
.split("")
72+
.map((char) => char.charCodeAt(0))
73+
);
74+
const blob = new Blob([byteArray], { type: "application/pdf" });
6875
const blobUrl = URL.createObjectURL(blob);
69-
window.open(blobUrl, '_blank');
76+
window.open(blobUrl, "_blank");
7077
} else {
7178
printModule({ printable: pdf, type: "pdf", base64: true });
7279
}
@@ -75,27 +82,86 @@ function Header({
7582
//handle download signed pdf
7683
const handleDownloadPdf = () => {
7784
const pdfName = pdfDetails[0] && pdfDetails[0].Name;
78-
79-
saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
85+
saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
8086
};
81-
87+
8288
const sanitizeFileName = (pdfName) => {
8389
// Replace spaces with underscore
8490
return pdfName.replace(/ /g, '_');
8591
}
86-
87-
92+
//certificate generate and download component in mobile view
93+
const CertificateDropDown = () => {
94+
//after generate download certifcate pdf
95+
const handleDownload = (pdfBlob, fileName) => {
96+
if (pdfBlob) {
97+
const url = window.URL.createObjectURL(pdfBlob);
98+
// Create a temporary anchor element
99+
const link = document.createElement("a");
100+
link.href = url;
101+
link.download = fileName;
102+
// Append the anchor to the body
103+
document.body.appendChild(link);
104+
// Programmatically click the anchor to trigger the download
105+
link.click();
106+
// Remove the anchor from the body
107+
document.body.removeChild(link);
108+
// Release the object URL to free up resources
109+
window.URL.revokeObjectURL(url);
110+
}
111+
};
112+
return (
113+
<PDFDownloadLink
114+
onClick={(e) => e.preventDefault()}
115+
style={{ textDecoration: "none", zIndex: "35" }}
116+
document={<Certificate pdfData={pdfDetails} />}
117+
>
118+
{({ blob, url, loading, error }) => (
119+
<>
120+
{loading ? (
121+
"Loading document..."
122+
) : (
123+
<div
124+
style={{
125+
border: "none",
126+
backgroundColor: "#fff"
127+
}}
128+
onClick={() =>
129+
handleDownload(
130+
blob,
131+
`completion certificate-${
132+
pdfDetails[0] && pdfDetails[0].Name
133+
}.pdf`
134+
)
135+
}
136+
>
137+
<i
138+
className="fa fa-certificate"
139+
style={{
140+
marginRight: "2px"
141+
}}
142+
aria-hidden="true"
143+
></i>
144+
Certificate
145+
</div>
146+
)}
147+
</>
148+
)}
149+
</PDFDownloadLink>
150+
);
151+
};
88152
return (
89153
<div
90-
style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
154+
style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
91155
className="mobileHead"
92156
>
93157
{isMobile && isShowHeader ? (
94158
<div
95159
id="navbar"
96160
className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
97161
style={{
98-
width: isGuestSigner ? window.innerWidth : window.innerWidth - 30 + "px"
162+
width: isGuestSigner
163+
? window.innerWidth
164+
: window.innerWidth - 30 + "px"
99165
}}
100166
>
101167
<div className="preBtn2">
@@ -140,16 +206,16 @@ function Header({
140206
style={{ color: "gray", cursor: "pointer" }}
141207
></i>
142208
</div>
143-
{pdfUrl ? (
209+
{pdfUrl && alreadySign ? (
144210
<DropdownMenu.Root>
145211
<DropdownMenu.Trigger asChild>
146212
<div
147-
// onClick={() => handleDownloadPdf()}
148213
style={{
149214
color: themeColor(),
150215
border: "none",
151216
fontWeight: "650",
152-
fontSize: "16px"
217+
fontSize: "16px",
218+
padding:"0px 3px 0px 5px"
153219
}}
154220
>
155221
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
@@ -179,51 +245,46 @@ function Header({
179245
Download
180246
</div>
181247
</DropdownMenu.Item>
182-
<DropdownMenu.Item className="DropdownMenuItem">
183-
<PDFDownloadLink
184-
style={{ textDecoration: "none" }}
185-
document={<Certificate pdfData={pdfDetails} />}
186-
fileName={`completion certificate-${
187-
pdfDetails[0] && pdfDetails[0].Name
188-
}.pdf`}
248+
{recipient && pdfDetails[0] && pdfDetails.length > 0 ? (
249+
<DropdownMenu.Item className="DropdownMenuItem">
250+
<CertificateDropDown />
251+
</DropdownMenu.Item>
252+
) : isPdfRequestFiles &&
253+
alreadySign &&
254+
isCompleted.isCertificate ? (
255+
<DropdownMenu.Item className="DropdownMenuItem">
256+
<CertificateDropDown />
257+
</DropdownMenu.Item>
258+
) :isSignYourself && (
259+
<DropdownMenu.Item className="DropdownMenuItem">
260+
<CertificateDropDown />
261+
</DropdownMenu.Item>
262+
)}
263+
<DropdownMenu.Item
264+
className="DropdownMenuItem"
265+
onClick={handleToPrint}
266+
>
267+
<div
268+
style={{
269+
display: "flex",
270+
flexDirection: "row"
271+
}}
189272
>
190-
{({ blob, url, loading, error }) => (
191-
<>
192-
{console.log("error", error)}
193-
{loading ? (
194-
"Loading document..."
195-
) : (
196-
<button
197-
type="button"
198-
className="defaultBtn certificateBtn"
199-
style={{
200-
display: "flex",
201-
flexDirection: "row",
202-
alignItems: "center"
203-
}}
204-
>
205-
<i
206-
className="fa fa-certificate"
207-
style={{
208-
color: "white",
209-
fontSize: "15px",
210-
marginRight: "3px"
211-
}}
212-
aria-hidden="true"
213-
></i>
214-
Certificate
215-
</button>
216-
)}
217-
</>
218-
)}
219-
</PDFDownloadLink>
273+
{" "}
274+
<i
275+
className="fa fa-print"
276+
aria-hidden="true"
277+
style={{ marginRight: "2px" }}
278+
></i>
279+
Print
280+
</div>
220281
</DropdownMenu.Item>
221282
</DropdownMenu.Content>
222283
</DropdownMenu.Portal>
223284
</DropdownMenu.Root>
224285
) : (
225286
<div style={{ display: "flex", justifyContent: "space-around" }}>
226-
{/* current signer is checking user send request and check status of pdf sign than if current
287+
{/* current signer is checking user send request and check status of pdf sign than if current
227288
user exist than show finish button else no
228289
*/}
229290
{currentSigner && (
@@ -267,6 +328,8 @@ function Header({
267328
onClick={() => {
268329
if (!pdfUrl) {
269330
embedImages();
331+
} else if (isPdfRequestFiles) {
332+
embedImages();
270333
}
271334
}}
272335
style={{
@@ -689,4 +752,4 @@ function Header({
689752
);
690753
}
691754

692-
export default Header;
755+
export default Header;

microfrontends/SignDocuments/src/Component/component/renderPdf.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ function RenderPdf({
4242
const isMobile = window.innerWidth < 767;
4343
const newWidth = window.innerWidth;
4444
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
45-
45+
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
46+
const isGuestSigner = localStorage.getItem("isGuestSigner");
4647
// handle signature block width and height according to screen
4748
const posWidth = (pos) => {
4849
let width;
@@ -74,8 +75,7 @@ function RenderPdf({
7475
return width;
7576
}
7677
};
77-
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
78-
const isGuestSigner = localStorage.getItem("isGuestSigner");
78+
7979

8080
//function for render placeholder block over pdf document
8181
const checkSignedSignes = (data) => {
@@ -777,7 +777,13 @@ function RenderPdf({
777777
}}
778778
onLoadSuccess={pageDetails}
779779
ref={pdfRef}
780-
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
780+
file={
781+
pdfUrl
782+
? pdfUrl
783+
: pdfDetails[0] && pdfDetails[0].SignedUrl
784+
? pdfDetails[0].SignedUrl
785+
: pdfDetails[0].URL
786+
}
781787
>
782788
{Array.from(new Array(numPages), (el, index) => (
783789
<Page
@@ -1293,7 +1299,13 @@ function RenderPdf({
12931299
}}
12941300
onLoadSuccess={pageDetails}
12951301
ref={pdfRef}
1296-
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
1302+
file={
1303+
pdfUrl
1304+
? pdfUrl
1305+
: pdfDetails[0] && pdfDetails[0].SignedUrl
1306+
? pdfDetails[0].SignedUrl
1307+
: pdfDetails[0].URL
1308+
}
12971309
>
12981310
{Array.from(new Array(numPages), (el, index) => (
12991311
<Page

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,6 +1083,7 @@ function EmbedPdfImage() {
10831083
isShowHeader={true}
10841084
currentSigner={true}
10851085
decline={true}
1086+
alreadySign={pdfUrl ? true :false}
10861087
/>
10871088

10881089
<RenderPdf

microfrontends/SignDocuments/src/css/signature.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -374,15 +374,13 @@
374374
font-size: 50px;
375375
}
376376

377-
378-
379377
.DropdownMenuContent,
380378
.DropdownMenuSubContent {
381379
min-width: 130px;
382-
background-color: #887abf;
383-
border: none;
380+
background-color: #fff;
381+
border: 1px solid rgba(0, 0, 0, .15);
382+
border-radius: 0.25rem;
384383
padding: 5px;
385-
386384
animation-duration: 400ms;
387385
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
388386
will-change: transform, opacity;
@@ -413,13 +411,13 @@
413411
font-size: 13px;
414412
line-height: 1;
415413
color: black;
416-
background-color: #887abf;
414+
background-color: #fff;
417415
display: flex;
418416
align-items: center;
419417
height: 25px;
420418
padding: 0 5px;
421419
position: relative;
422-
padding-left: 25px;
420+
padding-left: 20px;
423421
user-select: none;
424422
outline: none;
425423
border: none;
@@ -565,12 +563,12 @@ option {
565563
color: var(--violet-11);
566564
cursor: default;
567565
}
568-
.fontOptionContainer{
569-
border: 1px solid #d6d3d3;
570-
margin: 10px 5px 5px 5px;
571566

572-
}
567+
.fontOptionContainer {
568+
border: 1px solid #d6d3d3;
569+
margin: 10px 5px 5px 5px;
573570

571+
}
574572

575573
@media screen and (max-width:766px) {
576574

@@ -634,11 +632,13 @@ option {
634632
position: fixed;
635633
top: 50px;
636634
left: 0.9rem;
637-
}
638-
.stickySignerHead{
639-
position: fixed;
640-
}
641-
.stickyfooter {
635+
}
636+
637+
.stickySignerHead {
638+
position: fixed;
639+
}
640+
641+
.stickyfooter {
642642
position: fixed;
643643
bottom: 0px;
644644
right: 0rem;

0 commit comments

Comments
 (0)