mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-21 07:02:32 +02:00
685 lines
22 KiB
JavaScript
685 lines
22 KiB
JavaScript
import React from "react";
|
|
import PrevNext from "./prevNext";
|
|
import { PDFDownloadLink } from "@react-pdf/renderer";
|
|
import Certificate from "../Certificate/Certificate";
|
|
import printModule from "print-js";
|
|
import { getBase64FromUrl } from "../../utils/Utils";
|
|
import { saveAs } from "file-saver";
|
|
import "../../css/signature.css";
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { themeColor } from "../../utils/ThemeColor/backColor";
|
|
|
|
function Header({
|
|
isPdfRequestFiles,
|
|
isPlaceholder,
|
|
recipient,
|
|
setIsDecline,
|
|
pageNumber,
|
|
isAlreadySign,
|
|
allPages,
|
|
changePage,
|
|
pdfUrl,
|
|
documentStatus,
|
|
embedImages,
|
|
pdfDetails,
|
|
signerPos,
|
|
signersdata,
|
|
isMailSend,
|
|
alertSendEmail,
|
|
isSigned,
|
|
isCompleted,
|
|
isShowHeader,
|
|
decline,
|
|
currentSigner,
|
|
dataTut4,
|
|
alreadySign
|
|
}) {
|
|
const isMobile = window.innerWidth < 767;
|
|
const navigate = useNavigate();
|
|
|
|
//for go to previous page
|
|
function previousPage() {
|
|
changePage(-1);
|
|
}
|
|
//for go to next page
|
|
function nextPage() {
|
|
changePage(1);
|
|
}
|
|
//function for show decline alert
|
|
const handleDeclinePdfAlert = async () => {
|
|
const currentDecline = {
|
|
currnt: "Sure",
|
|
isDeclined: true
|
|
};
|
|
setIsDecline(currentDecline);
|
|
};
|
|
|
|
//function for print digital sign pdf
|
|
const handleToPrint = async (event) => {
|
|
event.preventDefault();
|
|
|
|
const pdf = await getBase64FromUrl(pdfUrl);
|
|
const isAndroidDevice = navigator.userAgent.match(/Android/i);
|
|
const isAppleDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) && !window.MSStream
|
|
if (isAndroidDevice || isAppleDevice) {
|
|
const byteArray = Uint8Array.from(atob(pdf).split('').map(char => char.charCodeAt(0)));
|
|
const blob = new Blob([byteArray], { type: 'application/pdf' });
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
window.open(blobUrl, '_blank');
|
|
} else {
|
|
printModule({ printable: pdf, type: "pdf", base64: true });
|
|
}
|
|
};
|
|
|
|
//handle download signed pdf
|
|
const handleDownloadPdf = () => {
|
|
const pdfName = pdfDetails[0] && pdfDetails[0].Name;
|
|
|
|
saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{ paddingBottom: "5px", paddingTop: "5px" }}
|
|
className="mobileHead"
|
|
>
|
|
{isMobile && isShowHeader ? (
|
|
<div
|
|
id="navbar"
|
|
className="stickyHead"
|
|
style={{ width: window.innerWidth - 30 + "px" }}
|
|
>
|
|
<div className="preBtn2">
|
|
<div
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-arrow-left"
|
|
aria-hidden="true"
|
|
style={{ color: themeColor(), cursor: "pointer" }}
|
|
></i>
|
|
</div>
|
|
<div>
|
|
<i
|
|
onClick={() => {
|
|
if (pageNumber > 1) {
|
|
previousPage();
|
|
}
|
|
}}
|
|
className="fa fa-backward"
|
|
style={{ color: "gray", cursor: "pointer" }}
|
|
></i>
|
|
<span
|
|
style={{
|
|
fontSize: "13px",
|
|
fontWeight: "600",
|
|
marginLeft: "10px",
|
|
marginRight: "10px"
|
|
}}
|
|
>
|
|
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
|
|
</span>
|
|
<i
|
|
onClick={() => {
|
|
if (pageNumber < allPages) {
|
|
nextPage();
|
|
}
|
|
}}
|
|
className="fa fa-forward"
|
|
style={{ color: "gray", cursor: "pointer" }}
|
|
></i>
|
|
</div>
|
|
{pdfUrl ? (
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger asChild>
|
|
<div
|
|
// onClick={() => handleDownloadPdf()}
|
|
style={{
|
|
color: themeColor(),
|
|
border: "none",
|
|
fontWeight: "650",
|
|
fontSize: "16px"
|
|
}}
|
|
>
|
|
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
|
|
</div>
|
|
</DropdownMenu.Trigger>
|
|
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content
|
|
className="DropdownMenuContent"
|
|
sideOffset={5}
|
|
>
|
|
<DropdownMenu.Item
|
|
className="DropdownMenuItem"
|
|
onClick={() => handleDownloadPdf()}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-arrow-down"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "2px" }}
|
|
></i>
|
|
Download
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item className="DropdownMenuItem">
|
|
<PDFDownloadLink
|
|
style={{ textDecoration: "none" }}
|
|
document={<Certificate pdfData={pdfDetails} />}
|
|
fileName={`completion certificate-${
|
|
pdfDetails[0] && pdfDetails[0].Name
|
|
}.pdf`}
|
|
>
|
|
{({ blob, url, loading, error }) => (
|
|
<>
|
|
{console.log("error", error)}
|
|
{loading ? (
|
|
"Loading document..."
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="defaultBtn certificateBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-certificate"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Certificate
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</PDFDownloadLink>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
</DropdownMenu.Root>
|
|
) : (
|
|
<div style={{ display: "flex", justifyContent: "space-around" }}>
|
|
{/* current signer is checking user send request and check status of pdf sign than if current
|
|
user exist than show finish button else no
|
|
*/}
|
|
{currentSigner && (
|
|
<>
|
|
{decline && (
|
|
<div
|
|
onClick={() => {
|
|
handleDeclinePdfAlert();
|
|
}}
|
|
style={{
|
|
color: "red",
|
|
border: "none",
|
|
fontWeight: "650",
|
|
fontSize: "16px",
|
|
marginRight: "10px"
|
|
}}
|
|
>
|
|
Decline
|
|
</div>
|
|
)}
|
|
{isPlaceholder ? (
|
|
<div
|
|
onClick={() => {
|
|
if (!isMailSend) {
|
|
alertSendEmail();
|
|
}
|
|
}}
|
|
style={{
|
|
color: isMailSend ? "gray" : themeColor(),
|
|
border: "none",
|
|
fontWeight: "650",
|
|
fontSize: "16px"
|
|
}}
|
|
data-tut={dataTut4}
|
|
>
|
|
Send
|
|
</div>
|
|
) : (
|
|
<div
|
|
data-tut="reactourThird"
|
|
onClick={() => {
|
|
if (!pdfUrl) {
|
|
embedImages();
|
|
}
|
|
}}
|
|
style={{
|
|
color: themeColor(),
|
|
border: "none",
|
|
fontWeight: "650",
|
|
fontSize: "16px"
|
|
}}
|
|
>
|
|
Finish
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="signatureHeader headerBtn">
|
|
<PrevNext
|
|
pageNumber={pageNumber}
|
|
allPages={allPages}
|
|
changePage={changePage}
|
|
/>
|
|
|
|
{recipient ? (
|
|
pdfUrl || isAlreadySign.mssg ? (
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
{pdfDetails[0] && pdfDetails.length > 0 && (
|
|
<PDFDownloadLink
|
|
style={{ textDecoration: "none" }}
|
|
document={<Certificate pdfData={pdfDetails} />}
|
|
fileName={`completion certificate-${
|
|
pdfDetails[0] && pdfDetails[0].Name
|
|
}.pdf`}
|
|
>
|
|
{({ blob, url, loading, error }) =>
|
|
loading ? (
|
|
"Loading document..."
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="defaultBtn certificateBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-certificate"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Certificate
|
|
</button>
|
|
)
|
|
}
|
|
</PDFDownloadLink>
|
|
)}
|
|
<button
|
|
onClick={handleToPrint}
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
className="defaultBtn printBtn"
|
|
>
|
|
<i
|
|
className="fa fa-print"
|
|
style={{
|
|
fontSize: "15px",
|
|
marginRight: "3px",
|
|
color: "white"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Print
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
className="defaultBtn downloadBtn"
|
|
onClick={() => handleDownloadPdf()}
|
|
>
|
|
<i
|
|
className="fa fa-download"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
<button
|
|
style={{
|
|
background: "#de4337"
|
|
}}
|
|
className="finishBtn hoverCss"
|
|
onClick={() => {
|
|
handleDeclinePdfAlert();
|
|
}}
|
|
>
|
|
Decline
|
|
</button>
|
|
|
|
<button
|
|
data-tut="reactourThird"
|
|
style={{
|
|
background: !pdfUrl ? "#188ae2" : "#d3edeb"
|
|
}}
|
|
className="finishBtn sendHover"
|
|
onClick={() => {
|
|
if (!pdfUrl) {
|
|
embedImages();
|
|
}
|
|
}}
|
|
>
|
|
Finish
|
|
</button>
|
|
</div>
|
|
)
|
|
) : isPlaceholder ? (
|
|
<>
|
|
{!isMailSend &&
|
|
signersdata.Signers &&
|
|
signersdata.Signers.length !== signerPos.length && (
|
|
<div>
|
|
{signerPos.length === 0 ? (
|
|
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
|
Add all {signersdata.Signers.length - signerPos.length}{" "}
|
|
recipients signature
|
|
</span>
|
|
) : (
|
|
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
|
Add {signersdata.Signers.length - signerPos.length} more
|
|
recipients signature
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
type="button"
|
|
className="defaultBtn backBtn"
|
|
>
|
|
Back
|
|
</button>
|
|
|
|
<button
|
|
disabled={isMailSend && true}
|
|
data-tut="reactourFour"
|
|
style={{
|
|
background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
|
|
color: isMailSend && "rgb(77, 75, 75)"
|
|
}}
|
|
onClick={() => {
|
|
alertSendEmail();
|
|
}}
|
|
className={isMailSend ? "sendMail" : "sendMail sendHover"}
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : isPdfRequestFiles ? (
|
|
alreadySign ? (
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
{isCompleted.isCertificate && (
|
|
<PDFDownloadLink
|
|
style={{ textDecoration: "none" }}
|
|
document={<Certificate pdfData={pdfDetails} />}
|
|
fileName={`completion certificate-${
|
|
pdfDetails[0] && pdfDetails[0].Name
|
|
}.pdf`}
|
|
>
|
|
{({ blob, url, loading, error }) =>
|
|
loading ? (
|
|
"Loading document..."
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="defaultBtn certificateBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-certificate"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Certificate
|
|
</button>
|
|
)
|
|
}
|
|
</PDFDownloadLink>
|
|
)}
|
|
<button
|
|
onClick={handleToPrint}
|
|
type="button"
|
|
className="defaultBtn printBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<i
|
|
className="fa fa-print"
|
|
style={{
|
|
fontSize: "15px",
|
|
marginRight: "3px",
|
|
color: "white"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Print
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className="defaultBtn downloadBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
onClick={() => handleDownloadPdf()}
|
|
>
|
|
<i
|
|
className="fa fa-download"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
type="button"
|
|
className="defaultBtn backBtn"
|
|
>
|
|
Back
|
|
</button>
|
|
{currentSigner && (
|
|
<>
|
|
<button
|
|
style={{
|
|
background: "#de4337"
|
|
}}
|
|
className="finishBtn hoverCss"
|
|
onClick={() => {
|
|
handleDeclinePdfAlert();
|
|
}}
|
|
>
|
|
Decline
|
|
</button>
|
|
<button
|
|
style={{
|
|
background: "#188ae2"
|
|
}}
|
|
type="button"
|
|
className="finishBtn sendHover"
|
|
onClick={() => {
|
|
embedImages();
|
|
}}
|
|
>
|
|
Finish
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
<PDFDownloadLink
|
|
style={{ textDecoration: "none" }}
|
|
document={<Certificate pdfData={pdfDetails} />}
|
|
fileName={`completion certificate-${
|
|
pdfDetails[0] && pdfDetails[0].Name
|
|
}.pdf`}
|
|
>
|
|
{({ blob, url, loading, error }) =>
|
|
loading ? (
|
|
"Loading document..."
|
|
) : (
|
|
<button
|
|
type="button"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
className="defaultBtn certificateBtn"
|
|
>
|
|
<i
|
|
className="fa fa-certificate"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Certificate
|
|
</button>
|
|
)
|
|
}
|
|
</PDFDownloadLink>
|
|
<button
|
|
onClick={handleToPrint}
|
|
type="button"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}}
|
|
className="defaultBtn printBtn"
|
|
>
|
|
<i
|
|
className="fa fa-print"
|
|
style={{
|
|
fontSize: "15px",
|
|
marginRight: "3px",
|
|
color: "white"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Print
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="defaultBtn downloadBtn"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginLeft: "10px"
|
|
}}
|
|
onClick={() => handleDownloadPdf()}
|
|
>
|
|
<i
|
|
className="fa fa-download"
|
|
style={{
|
|
color: "white",
|
|
fontSize: "15px",
|
|
marginRight: "3px"
|
|
}}
|
|
aria-hidden="true"
|
|
></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
type="button"
|
|
className="defaultBtn backBtn"
|
|
>
|
|
Back
|
|
</button>
|
|
|
|
<button
|
|
style={{
|
|
background: "#188ae2"
|
|
}}
|
|
type="button"
|
|
className="finishBtn sendHover"
|
|
onClick={() => {
|
|
if (!pdfUrl) {
|
|
embedImages();
|
|
}
|
|
}}
|
|
>
|
|
Finish
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|