mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-06 09:47:39 +02:00
update signDocuments microfrontend and change zindex of layout in opensign
This commit is contained in:
prafullnavkar-nxg
@@ -38,7 +38,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
|
||||
<div
|
||||
className={`${
|
||||
isOpen ? "block" : "hidden"
|
||||
} bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform ${
|
||||
} bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${
|
||||
isOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -166,15 +166,15 @@ const HomeLayout = ({ children }) => {
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="sticky top-0 z-30">
|
||||
<div className="sticky top-0 z-50">
|
||||
<Header showSidebar={showSidebar} />
|
||||
</div>
|
||||
<div className="flex md:flex-row flex-col">
|
||||
<div className="flex md:flex-row flex-col z-50">
|
||||
<Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
|
||||
|
||||
<div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div className="bg-[#eef1f5] p-3">{children}</div>
|
||||
<div>
|
||||
<div className="z-30">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -535,7 +535,7 @@ function PdfFile() {
|
||||
<div className="dropMenuBD">
|
||||
<div
|
||||
id="menu-container"
|
||||
class={isShowSort ? "dropdown show" : "dropdown"}
|
||||
className={isShowSort ? "dropdown show" : "dropdown"}
|
||||
onClick={() => setIsShowSort(!isShowSort)}
|
||||
>
|
||||
<div className=" sort " data-toggle="dropdown">
|
||||
|
||||
@@ -25,7 +25,6 @@ import Header from "./component/header";
|
||||
import RenderPdf from "./component/renderPdf";
|
||||
|
||||
function PdfRequestFiles() {
|
||||
|
||||
const { docId } = useParams();
|
||||
const [pdfDetails, setPdfDetails] = useState([]);
|
||||
const [signedSigners, setSignedSigners] = useState([]);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
|
||||
|
||||
import { PDFDocument, rgb } from "pdf-lib";
|
||||
import "../css/./signature.css";
|
||||
import sign from "../assests/sign3.png";
|
||||
@@ -1167,7 +1167,6 @@ function SignYourSelf() {
|
||||
pdfOriginalWidth={pdfOriginalWidth}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
drop={drop}
|
||||
|
||||
successEmail={successEmail}
|
||||
nodeRef={nodeRef}
|
||||
handleTabDrag={handleTabDrag}
|
||||
@@ -1192,8 +1191,9 @@ function SignYourSelf() {
|
||||
{/*if document is not completed then render signature and stamp button in the right side */}
|
||||
{/*else document is completed then render signed by signer name in the right side */}
|
||||
{!documentStatus.isCompleted ? (
|
||||
<div data-tut="reactourFirst">
|
||||
<div>
|
||||
<FieldsComponent
|
||||
dataTut="reactourFirst"
|
||||
pdfUrl={pdfUrl}
|
||||
sign={sign}
|
||||
stamp={stamp}
|
||||
@@ -1213,6 +1213,7 @@ function SignYourSelf() {
|
||||
xyPostion={xyPostion}
|
||||
isSignYourself={true}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
isMailSend={false}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -191,7 +191,7 @@ function EmailComponent({
|
||||
className="btn btn-primary btn-sm"
|
||||
>
|
||||
<i
|
||||
class="fa fa-print"
|
||||
className="fa fa-print"
|
||||
style={{
|
||||
fontSize: "15px",
|
||||
marginRight: "3px",
|
||||
@@ -332,7 +332,7 @@ function EmailComponent({
|
||||
marginTop: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
class="fa fa-plus"
|
||||
className="fa fa-plus"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import * as Select from "@radix-ui/react-select";
|
||||
import classnames from "classnames";
|
||||
|
||||
function FieldsComponent({
|
||||
pdfUrl,
|
||||
sign,
|
||||
@@ -19,19 +20,24 @@ function FieldsComponent({
|
||||
isDragSignatureSS,
|
||||
isSignYourself,
|
||||
addPositionOfSignature,
|
||||
signerPos,
|
||||
|
||||
signersdata,
|
||||
isSelectListId,
|
||||
setSignerObjId,
|
||||
setIsSelectId,
|
||||
setContractName,
|
||||
isSigners,
|
||||
dataTut,
|
||||
dataTut2,
|
||||
setIsShowEmail,
|
||||
isMailSend,
|
||||
selectedEmail,
|
||||
setSelectedEmail,
|
||||
}) {
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const [isShowSort, setIsShowSort] = useState(false);
|
||||
const [selectedEmail, setSelectedEmail] = useState("");
|
||||
|
||||
const SelectItem = React.forwardRef(
|
||||
({ children, className, ...props }, forwardedRef) => {
|
||||
return (
|
||||
@@ -46,266 +52,176 @@ function FieldsComponent({
|
||||
);
|
||||
}
|
||||
);
|
||||
console.log("sign",isSignYourself)
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
"#c0e3bc",
|
||||
"#bce3db",
|
||||
"#b8ccdb",
|
||||
"#ceb8db",
|
||||
"#ffccff",
|
||||
"#99ffcc",
|
||||
"#cc99ff",
|
||||
"#ffcc99",
|
||||
"#66ccff",
|
||||
"#ffffcc",
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="signerComponent">
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
|
||||
padding: "5px",
|
||||
}}
|
||||
>
|
||||
<span className="signedStyle">Fields</span>
|
||||
</div>
|
||||
|
||||
<div className="signLayoutContainer1">
|
||||
{pdfUrl ? (
|
||||
<>
|
||||
<button className={signStyle} disabled={true}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="sign img"
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
</button>
|
||||
<button className={signStyle} disabled={true}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="stamp img"
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{isMobile && isSignYourself ? (
|
||||
!isMailSend && (
|
||||
<div
|
||||
data-tut={dataTut}
|
||||
id="navbar"
|
||||
className="stickyfooter"
|
||||
style={{ width: window.innerWidth + "px" }}
|
||||
>
|
||||
{isSigners && (
|
||||
<div
|
||||
data-tut={dataTut}
|
||||
style={{
|
||||
background: isSelectListId
|
||||
? color[isSelectListId % color.length]
|
||||
: color[0],
|
||||
padding: "10px 20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "18px", fontWeight: "500" }}>
|
||||
Signer :
|
||||
</span>
|
||||
|
||||
<Select.Root
|
||||
onValueChange={(obj) => {
|
||||
const [selectedKey, selectedData] = obj.split("|");
|
||||
const parseData = JSON.parse(selectedData);
|
||||
|
||||
setSignerObjId(parseData.objectId);
|
||||
setIsSelectId(selectedKey);
|
||||
setContractName(parseData.className);
|
||||
setSelectedEmail(true);
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
className="SelectTrigger"
|
||||
style={{
|
||||
background: isSelectListId
|
||||
? color[isSelectListId % color.length]
|
||||
: color[0],
|
||||
}}
|
||||
aria-label="Food"
|
||||
>
|
||||
<Select.Value placeholder="Select signer.." />
|
||||
<Select.Icon className="SelectIcon">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content
|
||||
className="SelectContent"
|
||||
style={{ zIndex: "5000" }}
|
||||
>
|
||||
<Select.ScrollUpButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.ScrollUpButton>
|
||||
<Select.Viewport className="SelectViewport">
|
||||
<Select.Group>
|
||||
{signersdata.Signers.map((obj, ind) => {
|
||||
return (
|
||||
<SelectItem
|
||||
selected
|
||||
key={ind}
|
||||
value={`${ind}|${JSON.stringify(obj)}`}
|
||||
// value={(obj)}
|
||||
>
|
||||
{" "}
|
||||
{obj.Email}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
{/* <SelectItem value="orange">Orange</SelectItem>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="grape"></SelectItem> */}
|
||||
</Select.Group>
|
||||
</Select.Viewport>
|
||||
<Select.ScrollDownButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.ScrollDownButton>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
data-tut={dataTut2}
|
||||
className="signLayoutContainer2"
|
||||
style={{ backgroundColor: themeColor() }}
|
||||
>
|
||||
<div
|
||||
onClick={() => {
|
||||
if (isSigners) {
|
||||
if (selectedEmail) {
|
||||
addPositionOfSignature("onclick", false);
|
||||
} else {
|
||||
setIsShowEmail(true);
|
||||
}
|
||||
} else {
|
||||
addPositionOfSignature("onclick", false);
|
||||
}
|
||||
}}
|
||||
ref={(element) => {
|
||||
dragSignature(element);
|
||||
dragSignatureSS(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
// const height = signRef && signRef.current.offsetHeight;
|
||||
// const width = signRef && signRef.current.offsetWidth;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
opacity: isDragSignatureSS ? 0.5 : 1,
|
||||
backgroundImage: `url(${sign})`,
|
||||
backgroundSize: "70% 70%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
<img
|
||||
alt="sign img"
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={(element) => {
|
||||
dragStamp(element);
|
||||
dragRef.current = element;
|
||||
if (isDragStamp) {
|
||||
// setIsStamp(true);
|
||||
}
|
||||
}}
|
||||
className={!pdfUrl ? signStyle : "disableSign"}
|
||||
disabled={pdfUrl && true}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragStamp ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: !pdfUrl ? "black" : "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="stamp img"
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isMobile && isSignYourself && (
|
||||
<div
|
||||
id="navbar"
|
||||
className="stickyfooter"
|
||||
style={{ width: window.innerWidth + "px" }}
|
||||
>
|
||||
{isSigners && (
|
||||
<div
|
||||
style={{
|
||||
background: "#887abf",
|
||||
padding: "10px 20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "18px", fontWeight: "500" }}>
|
||||
Signer :
|
||||
</span>
|
||||
|
||||
<Select.Root onValueChange={(e) => console.log("value", e)}>
|
||||
<Select.Trigger
|
||||
onValueChange={(e) => console.log("value", e)}
|
||||
className="SelectTrigger"
|
||||
aria-label="Food"
|
||||
>
|
||||
<Select.Value placeholder="Select signer" />
|
||||
<Select.Icon className="SelectIcon">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
class="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content
|
||||
className="SelectContent"
|
||||
style={{ zIndex: "5000" }}
|
||||
>
|
||||
<Select.ScrollUpButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
class="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.ScrollUpButton>
|
||||
<Select.Viewport className="SelectViewport">
|
||||
<Select.Group>
|
||||
{signersdata.Signers.map((obj, ind) => {
|
||||
return (
|
||||
<SelectItem key={ind} value={selectedEmail}>
|
||||
{" "}
|
||||
{obj.Email}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select.Group>
|
||||
</Select.Viewport>
|
||||
<Select.ScrollDownButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
class="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.ScrollDownButton>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="signLayoutContainer2"
|
||||
style={{ backgroundColor: themeColor() }}
|
||||
>
|
||||
<div
|
||||
onClick={() => addPositionOfSignature("onclick", false)}
|
||||
ref={(element) => {
|
||||
dragSignatureSS(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
// const height = signRef && signRef.current.offsetHeight;
|
||||
// const width = signRef && signRef.current.offsetWidth;
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
opacity: isDragSignatureSS ? 0.5 : 1,
|
||||
backgroundImage: `url(${sign})`,
|
||||
backgroundSize: "70% 70%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
}}
|
||||
>
|
||||
{/* <img
|
||||
{/* <img
|
||||
alt="sign img"
|
||||
style={{
|
||||
width: "30px",
|
||||
@@ -314,49 +230,193 @@ console.log("sign",isSignYourself)
|
||||
}}
|
||||
src={sign}
|
||||
/> */}
|
||||
<span
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => addPositionOfSignature("onclick", true)}
|
||||
ref={(element) => {
|
||||
dragStampSS(element);
|
||||
dragRef.current = element;
|
||||
}}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
backgroundImage: `url(${stamp})`,
|
||||
backgroundSize: "32px 33px",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => addPositionOfSignature("onclick", true)}
|
||||
ref={(element) => {
|
||||
dragStampSS(element);
|
||||
dragRef.current = element;
|
||||
}}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
backgroundImage: `url(${stamp})`,
|
||||
backgroundSize: "32px 33px",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div data-tut={dataTut} className="signerComponent">
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
|
||||
padding: "5px",
|
||||
}}
|
||||
>
|
||||
<span className="signedStyle">Fields</span>
|
||||
</div>
|
||||
|
||||
<div className="signLayoutContainer1">
|
||||
{pdfUrl ? (
|
||||
<>
|
||||
<button className={signStyle} disabled={true}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="sign img"
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
</button>
|
||||
<button className={signStyle} disabled={true}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="stamp img"
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
ref={(element) => {
|
||||
dragSignature(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
// const height = signRef && signRef.current.offsetHeight;
|
||||
// const width = signRef && signRef.current.offsetWidth;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
<img
|
||||
alt="sign img"
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={(element) => {
|
||||
dragStamp(element);
|
||||
dragRef.current = element;
|
||||
if (isDragStamp) {
|
||||
// setIsStamp(true);
|
||||
}
|
||||
}}
|
||||
className={!pdfUrl ? signStyle : "disableSign"}
|
||||
disabled={pdfUrl && true}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragStamp ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: !pdfUrl ? "black" : "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
|
||||
<img
|
||||
alt="stamp img"
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -32,6 +32,7 @@ function Header({
|
||||
isShowHeader,
|
||||
decline,
|
||||
currentSigner,
|
||||
dataTut4,
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const navigate = useNavigate();
|
||||
@@ -74,403 +75,7 @@ function Header({
|
||||
style={{ paddingBottom: "5px", paddingTop: "5px" }}
|
||||
className="mobileHead"
|
||||
>
|
||||
<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 && (
|
||||
// <Certificate
|
||||
// pdfData={completePdfData}
|
||||
// />
|
||||
<PDFDownloadLink
|
||||
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
|
||||
class="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
|
||||
class="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>
|
||||
)
|
||||
) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<PDFDownloadLink
|
||||
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
|
||||
class="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
|
||||
class="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>
|
||||
) : 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
|
||||
data-tut="reactourFour"
|
||||
style={{
|
||||
background: !isMailSend ? "#188ae2" : "#d3edeb",
|
||||
}}
|
||||
onClick={() => {
|
||||
alertSendEmail();
|
||||
}}
|
||||
className="finishBtn sendHover"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : isPdfRequestFiles ? (
|
||||
isSigned ? (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
{isCompleted.isCertificate && (
|
||||
<PDFDownloadLink
|
||||
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
|
||||
class="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
|
||||
class="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>
|
||||
)
|
||||
) : (
|
||||
<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>
|
||||
{isMobile && isShowHeader && (
|
||||
{isMobile && isShowHeader ? (
|
||||
<div
|
||||
id="navbar"
|
||||
className="stickyHead"
|
||||
@@ -530,7 +135,7 @@ function Header({
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
|
||||
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
|
||||
</div>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
@@ -549,7 +154,11 @@ function Header({
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<i class="fa fa-arrow-down" aria-hidden="true" style={{marginRight:"2px"}}></i>
|
||||
<i
|
||||
className="fa fa-arrow-down"
|
||||
aria-hidden="true"
|
||||
style={{ marginRight: "2px" }}
|
||||
></i>
|
||||
Download
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
@@ -560,32 +169,31 @@ function Header({
|
||||
pdfDetails[0] && pdfDetails[0].Name
|
||||
}.pdf`}
|
||||
>
|
||||
{({ blob, url, loading, error }) =>
|
||||
<>
|
||||
{console.log("error",error)}
|
||||
{loading ? (
|
||||
"Loading document..."
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa fa-certificate"
|
||||
{({ blob, url, loading, error }) => (
|
||||
<>
|
||||
{console.log("error", error)}
|
||||
{loading ? (
|
||||
"Loading document..."
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "15px",
|
||||
marginRight: "3px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
Certificate
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
}
|
||||
>
|
||||
<i
|
||||
className="fa fa-certificate"
|
||||
style={{
|
||||
fontSize: "15px",
|
||||
marginRight: "3px",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
Certificate
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PDFDownloadLink>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
@@ -614,44 +222,445 @@ function Header({
|
||||
Decline
|
||||
</div>
|
||||
)}
|
||||
{isPlaceholder ?(
|
||||
{isPlaceholder ? (
|
||||
<div
|
||||
onClick={() => {
|
||||
alertSendEmail();
|
||||
}}
|
||||
style={{
|
||||
color: themeColor(),
|
||||
border: "none",
|
||||
fontWeight: "650",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</div>
|
||||
):(
|
||||
onClick={() => {
|
||||
if (!isMailSend) {
|
||||
alertSendEmail();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
color: isMailSend ? "gray" : themeColor(),
|
||||
border: "none",
|
||||
fontWeight: "650",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
data-tut={dataTut4}
|
||||
>
|
||||
Send
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => {
|
||||
if (!pdfUrl) {
|
||||
embedImages();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
color: themeColor(),
|
||||
border: "none",
|
||||
fontWeight: "650",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
Finish
|
||||
</div>
|
||||
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 && (
|
||||
// <Certificate
|
||||
// pdfData={completePdfData}
|
||||
// />
|
||||
<PDFDownloadLink
|
||||
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>
|
||||
)
|
||||
) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<PDFDownloadLink
|
||||
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>
|
||||
) : 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 ? (
|
||||
isSigned ? (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
{isCompleted.isCertificate && (
|
||||
<PDFDownloadLink
|
||||
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>
|
||||
)
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -2,25 +2,42 @@ import React from "react";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import ModalHeader from "react-bootstrap/esm/ModalHeader";
|
||||
|
||||
function ModalComponent({ isShow, type }) {
|
||||
function ModalComponent({ isShow, type,setIsShowEmail }) {
|
||||
return (
|
||||
<Modal show={isShow}>
|
||||
<ModalHeader className="bg-danger" style={{ color: "white" }}>
|
||||
{type === "pdfFail" ? (
|
||||
<span>Failed to load pdf!</span>
|
||||
) : type === "signersAlert" ? (
|
||||
<span>Select signers</span>
|
||||
) : (
|
||||
<span>Document Expired!</span>
|
||||
)}
|
||||
</ModalHeader>
|
||||
|
||||
<Modal.Body>
|
||||
{type === "pdfFail" ? (
|
||||
<p>Something went wrong failed to load pdf file!</p>
|
||||
{type === "pdfFail" ? (
|
||||
<p>Something went wrong failed to load pdf file!</p>
|
||||
) : type === "signersAlert" ? (
|
||||
<p>Please select signer for add placeholder!</p>
|
||||
) : (
|
||||
<p>This Document is no longer available.</p>
|
||||
)}
|
||||
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsShowEmail(false)
|
||||
}}
|
||||
style={{
|
||||
color: "black",
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -38,11 +38,12 @@ function RenderPdf({
|
||||
signerObjectId,
|
||||
signedSigners,
|
||||
setPdfLoadFail,
|
||||
setIsDragging,
|
||||
placeholder,
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 712;
|
||||
|
||||
//function for render placeholder block over pdf document
|
||||
|
||||
const checkSignedSignes = (data) => {
|
||||
// console.log("data",data)
|
||||
const checkSign = signedSigners.filter(
|
||||
@@ -903,8 +904,12 @@ function RenderPdf({
|
||||
}}
|
||||
disableDragging={true}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition,
|
||||
x: pos.scale
|
||||
? pos.xPosition * pos.scale
|
||||
: pos.xPosition,
|
||||
y: pos.scale
|
||||
? pos.yPosition * pos.scale
|
||||
: pos.yPosition,
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
|
||||
@@ -22,6 +22,7 @@ import SignerListPlace from "./component/signerListPlace";
|
||||
import Header from "./component/header";
|
||||
import { contactBook, contractUsers } from "../utils/Utils";
|
||||
import RenderPdf from "./component/renderPdf";
|
||||
import ModalComponent from "./component/modalComponent";
|
||||
|
||||
function PlaceHolderSign() {
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||
@@ -58,6 +59,8 @@ function PlaceHolderSign() {
|
||||
const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
|
||||
const [contractName, setContractName] = useState("");
|
||||
const { docId } = useParams();
|
||||
const [isShowEmail, setIsShowEmail] = useState(false);
|
||||
const [selectedEmail, setSelectedEmail] = useState(false);
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
@@ -301,40 +304,80 @@ function PlaceHolderSign() {
|
||||
// setIsLoading(loadObj);
|
||||
// });
|
||||
};
|
||||
console.log("signerpos", signerPos, isDragStampSS, isDragSignatureSS);
|
||||
//function for setting position after drop signature button over pdf
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
const isMobile = window.innerWidth < 712;
|
||||
|
||||
if (isMobile) {
|
||||
if (selectedEmail) {
|
||||
getSignerPos(item, monitor);
|
||||
} else {
|
||||
setIsShowEmail(true);
|
||||
}
|
||||
} else {
|
||||
getSignerPos(item, monitor);
|
||||
}
|
||||
};
|
||||
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = pdfOriginalWidth / newWidth;
|
||||
const key = Math.floor(1000 + Math.random() * 9000);
|
||||
const offset = monitor.getClientOffset();
|
||||
//adding and updating drop position in array when user drop signature button in div
|
||||
const containerRect = document
|
||||
.getElementById("container")
|
||||
.getBoundingClientRect();
|
||||
const x = offset.x - containerRect.left;
|
||||
const y = offset.y - containerRect.top;
|
||||
const ybottom = containerRect.bottom - offset.y;
|
||||
|
||||
const dropData = [];
|
||||
const xyPosArr = [];
|
||||
const dropObj = {
|
||||
xPosition: x - signBtnPosition[0].xPos,
|
||||
yPosition: y - signBtnPosition[0].yPos,
|
||||
isStamp: isDragStamp ? true : false,
|
||||
key: key,
|
||||
isDrag: false,
|
||||
firstXPos: signBtnPosition[0].xPos,
|
||||
firstYPos: signBtnPosition[0].yPos,
|
||||
yBottom: ybottom,
|
||||
};
|
||||
dropData.push(dropObj);
|
||||
const xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData,
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
const filterSignerPos = signerPos.filter(
|
||||
let filterSignerPos = signerPos.filter(
|
||||
(data) => data.signerObjId === signerObjId
|
||||
);
|
||||
let dropData = [];
|
||||
let xyPosArr = [];
|
||||
let xyPos = {};
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
yPosition: window.innerHeight / 2 - 60,
|
||||
isStamp: monitor,
|
||||
key: key,
|
||||
isDrag: false,
|
||||
scale: isMobile && scale,
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
};
|
||||
dropData.push(dropObj);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData,
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
} else if (item.type === "BOX") {
|
||||
const offset = monitor.getClientOffset();
|
||||
//adding and updating drop position in array when user drop signature button in div
|
||||
const containerRect = document
|
||||
.getElementById("container")
|
||||
.getBoundingClientRect();
|
||||
const x = offset.x - containerRect.left;
|
||||
const y = offset.y - containerRect.top;
|
||||
const ybottom = containerRect.bottom - offset.y;
|
||||
|
||||
const dropObj = {
|
||||
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
|
||||
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
|
||||
isStamp: isDragStamp || isDragStampSS ? true : false,
|
||||
key: key,
|
||||
isDrag: false,
|
||||
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
|
||||
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
|
||||
yBottom: ybottom,
|
||||
scale: isMobile && scale,
|
||||
};
|
||||
|
||||
dropData.push(dropObj);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData,
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
}
|
||||
|
||||
//add signers objId first inseretion
|
||||
if (filterSignerPos.length > 0) {
|
||||
@@ -739,6 +782,9 @@ function PlaceHolderSign() {
|
||||
Placeholders: signerPos,
|
||||
SignedUrl: pdfDetails[0].URL,
|
||||
};
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
|
||||
|
||||
await axios
|
||||
.put(
|
||||
@@ -822,7 +868,9 @@ function PlaceHolderSign() {
|
||||
}
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${extUserClass}/${signerUserId}`,
|
||||
`${localStorage.getItem(
|
||||
"baseUrl"
|
||||
)}classes/${extUserClass}/${signerUserId}`,
|
||||
{
|
||||
TourStatus: updatedTourStatus,
|
||||
},
|
||||
@@ -1009,6 +1057,11 @@ function PlaceHolderSign() {
|
||||
)}
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<ModalComponent
|
||||
isShow={isShowEmail}
|
||||
type={"signersAlert"}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
isPlaceholder={true}
|
||||
@@ -1022,55 +1075,63 @@ function PlaceHolderSign() {
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfOriginalWidth={pdfOriginalWidth}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
handleImageResize={handleImageResize}
|
||||
/>
|
||||
<div data-tut="reactourThird">
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfOriginalWidth={pdfOriginalWidth}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
handleImageResize={handleImageResize}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* signature button */}
|
||||
{isMobile ? (
|
||||
|
||||
<div data-tut="reactourSecond">
|
||||
<FieldsComponent
|
||||
pdfUrl={isMailSend}
|
||||
sign={sign}
|
||||
stamp={stamp}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
themeColor={themeColor}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
// isSignYourself={true}
|
||||
isDragSignatureSS={isDragSignatureSS}
|
||||
dragSignatureSS={dragSignatureSS}
|
||||
dragStampSS={dragStampSS}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<FieldsComponent
|
||||
dataTut="reactourFirst"
|
||||
dataTut2="reactourSecond"
|
||||
pdfUrl={isMailSend}
|
||||
sign={sign}
|
||||
stamp={stamp}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
themeColor={themeColor}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={true}
|
||||
isDragSignatureSS={isDragSignatureSS}
|
||||
dragSignatureSS={dragSignatureSS}
|
||||
dragStampSS={dragStampSS}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
isSigners={true}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
@@ -1098,9 +1159,6 @@ function PlaceHolderSign() {
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
isDragSignatureSS={isDragSignatureSS}
|
||||
dragSignatureSS={dragSignatureSS}
|
||||
dragStampSS={dragStampSS}
|
||||
// xyPostion={xyPostion}
|
||||
// isSigners={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
|
||||
@@ -26,7 +26,6 @@ import Header from "./component/header";
|
||||
import ModalComponent from "./component/modalComponent";
|
||||
import RenderPdf from "./component/renderPdf";
|
||||
function EmbedPdfImage() {
|
||||
|
||||
const { id, userPhone } = useParams();
|
||||
|
||||
const [isSignPad, setIsSignPad] = useState(false);
|
||||
@@ -618,10 +617,13 @@ function EmbedPdfImage() {
|
||||
? imgUrlList[id].Height
|
||||
: 60;
|
||||
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
|
||||
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
|
||||
page.drawImage(img, {
|
||||
x: imgUrlList[id].xPosition,
|
||||
y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
|
||||
x: imgUrlList[id].xPosition * scale + 50,
|
||||
y:
|
||||
page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
|
||||
width: imgWidth,
|
||||
height: imgHeight,
|
||||
});
|
||||
@@ -647,17 +649,26 @@ function EmbedPdfImage() {
|
||||
pageNo
|
||||
) => {
|
||||
let signgleSign;
|
||||
const isMobile = window.innerWidth < 712;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
|
||||
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
|
||||
const height = xyPosData.Height ? xyPosData.Height : 60;
|
||||
const bottomY = xyPosData.isDrag
|
||||
? xyPosData.yBottom - height
|
||||
: xyPosData.yBottom - height + xyPosData.firstYPos;
|
||||
? xyPosData.yBottom * scale - height
|
||||
: xyPosData.firstYPos
|
||||
? xyPosData.yBottom * scale - height + xyPosData.firstYPos
|
||||
: xyPosData.yBottom * scale - height;
|
||||
signgleSign = {
|
||||
pdfFile: pdfBase64Url,
|
||||
docId: docId,
|
||||
sign: {
|
||||
Base64: base64Url,
|
||||
Left: xyPosData.resizeXPos
|
||||
Left: isMobile
|
||||
? xyPosData.resizeXPos
|
||||
? xyPosData.resizeXPos * scale + 80
|
||||
: xyPosData.xPosition * scale + 80
|
||||
: xyPosData.resizeXPos
|
||||
? xyPosData.resizeXPos
|
||||
: xyPosData.xPosition,
|
||||
Bottom: bottomY,
|
||||
@@ -770,99 +781,6 @@ function EmbedPdfImage() {
|
||||
const saveImage = () => {
|
||||
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
|
||||
setXyPostion(getImage);
|
||||
// const updateFilter = xyPostion[index].pos.filter(
|
||||
// (data) =>
|
||||
// data.key === signKey && data.Width && data.Height && data.SignUrl
|
||||
// );
|
||||
|
||||
// if (updateFilter.length > 0) {
|
||||
// let newWidth, nweHeight;
|
||||
// const aspectRatio = imgWH.width / imgWH.height;
|
||||
// const getXYdata = xyPostion[index].pos;
|
||||
// if (aspectRatio === 1) {
|
||||
// newWidth = aspectRatio * 100;
|
||||
// nweHeight = aspectRatio * 100;
|
||||
// } else if (aspectRatio < 2) {
|
||||
// newWidth = aspectRatio * 100;
|
||||
// nweHeight = 100;
|
||||
// } else if (aspectRatio > 2 && aspectRatio < 4) {
|
||||
// newWidth = aspectRatio * 70;
|
||||
// nweHeight = 70;
|
||||
// } else if (aspectRatio > 4) {
|
||||
// newWidth = aspectRatio * 40;
|
||||
// nweHeight = 40;
|
||||
// } else if (aspectRatio > 5) {
|
||||
// newWidth = aspectRatio * 10;
|
||||
// nweHeight = 10;
|
||||
// }
|
||||
// const getPosData = getXYdata;
|
||||
// const addSign = getPosData.map((url, ind) => {
|
||||
// if (url.key === signKey) {
|
||||
// return {
|
||||
// ...url,
|
||||
// Width: newWidth,
|
||||
// Height: nweHeight,
|
||||
// SignUrl: image.src,
|
||||
// ImageType: image.imgType,
|
||||
// };
|
||||
// }
|
||||
// return url;
|
||||
// });
|
||||
|
||||
// const newUpdateUrl = xyPostion.map((obj, ind) => {
|
||||
// if (ind === index) {
|
||||
// return { ...obj, pos: addSign };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
// setXyPostion(newUpdateUrl);
|
||||
// } else {
|
||||
// const getXYdata = xyPostion[index].pos;
|
||||
|
||||
// const getPosData = getXYdata;
|
||||
|
||||
// const aspectRatio = imgWH.width / imgWH.height;
|
||||
|
||||
// let newWidth, nweHeight;
|
||||
// if (aspectRatio === 1) {
|
||||
// newWidth = aspectRatio * 100;
|
||||
// nweHeight = aspectRatio * 100;
|
||||
// } else if (aspectRatio < 2) {
|
||||
// newWidth = aspectRatio * 100;
|
||||
// nweHeight = 100;
|
||||
// } else if (aspectRatio > 2 && aspectRatio < 4) {
|
||||
// newWidth = aspectRatio * 70;
|
||||
// nweHeight = 70;
|
||||
// } else if (aspectRatio > 4) {
|
||||
// newWidth = aspectRatio * 40;
|
||||
// nweHeight = 40;
|
||||
// } else if (aspectRatio > 5) {
|
||||
// newWidth = aspectRatio * 10;
|
||||
// nweHeight = 10;
|
||||
// }
|
||||
|
||||
// const addSign = getPosData.map((url, ind) => {
|
||||
// if (url.key === signKey) {
|
||||
// return {
|
||||
// ...url,
|
||||
// Width: newWidth,
|
||||
// Height: nweHeight,
|
||||
// SignUrl: image.src,
|
||||
// ImageType: image.imgType,
|
||||
// };
|
||||
// }
|
||||
// return url;
|
||||
// });
|
||||
|
||||
// const newUpdateUrl = xyPostion.map((obj, ind) => {
|
||||
// if (ind === index) {
|
||||
// return { ...obj, pos: addSign };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
|
||||
// setXyPostion(newUpdateUrl);
|
||||
// }
|
||||
};
|
||||
|
||||
//function for set decline true on press decline button
|
||||
|
||||
@@ -10,8 +10,9 @@
|
||||
width: 460px;
|
||||
height: 184px;
|
||||
}
|
||||
.penContainer{
|
||||
width: 460px;
|
||||
|
||||
.penContainer {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.signatureBtn {
|
||||
@@ -37,18 +38,21 @@
|
||||
} */
|
||||
|
||||
.disableSign {
|
||||
border: none;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
border: 1.5px solid #47a3ad;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
justify-content: space-between;
|
||||
background: #d3edeb;
|
||||
background: white;
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
cursor: all-scroll;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
color: black;
|
||||
border: 1px solid rgb(203, 203, 203);
|
||||
cursor: text;
|
||||
|
||||
}
|
||||
|
||||
.emailInput {
|
||||
@@ -76,13 +80,14 @@
|
||||
|
||||
.addEmail,
|
||||
.emailInput {
|
||||
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.addEmailInput {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.addEmailInput{
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.emailChip {
|
||||
background-color: #47a3ad;
|
||||
@@ -115,12 +120,23 @@
|
||||
border: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.sendMail{
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
padding: 3px 30px;
|
||||
color: white;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px !important;
|
||||
border: none;
|
||||
margin-left: 10px;
|
||||
/* color: rgb(77, 75, 75); */
|
||||
}
|
||||
|
||||
.finishBtn:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.finishBtn:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
|
||||
color: white;
|
||||
@@ -382,29 +398,33 @@
|
||||
background-color: #887abf;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
animation-duration: 400ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
z-index: 30 !important;
|
||||
}
|
||||
|
||||
.DropdownMenuContent[data-side='top'],
|
||||
.DropdownMenuSubContent[data-side='top'] {
|
||||
animation-name: slideDownAndFade;
|
||||
}
|
||||
|
||||
.DropdownMenuContent[data-side='right'],
|
||||
.DropdownMenuSubContent[data-side='right'] {
|
||||
animation-name: slideLeftAndFade;
|
||||
}
|
||||
|
||||
.DropdownMenuContent[data-side='bottom'],
|
||||
.DropdownMenuSubContent[data-side='bottom'] {
|
||||
animation-name: slideUpAndFade;
|
||||
}
|
||||
|
||||
.DropdownMenuContent[data-side='left'],
|
||||
.DropdownMenuSubContent[data-side='left'] {
|
||||
animation-name: slideRightAndFade;
|
||||
}
|
||||
|
||||
|
||||
.DropdownMenuItem {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
@@ -420,106 +440,112 @@
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.SelectTrigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
padding: 0 15px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
height: 35px;
|
||||
gap: 5px;
|
||||
border: none;
|
||||
background-color: #887abf;
|
||||
color: black
|
||||
|
||||
}
|
||||
option{
|
||||
overflow-y:scroll;
|
||||
}
|
||||
.SelectTrigger:hover {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.SelectTrigger:focus {
|
||||
/* box-shadow: 0 0 0 2px black; */
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.SelectTrigger[data-placeholder] {
|
||||
color: black;
|
||||
}
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
padding: 0 15px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
height: 35px;
|
||||
gap: 5px;
|
||||
border: none;
|
||||
background-color: #887abf;
|
||||
color: black
|
||||
}
|
||||
|
||||
.SelectIcon {
|
||||
color: Var(--violet-11);
|
||||
}
|
||||
option {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.SelectContent {
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
|
||||
}
|
||||
.SelectTrigger:hover {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.SelectViewport {
|
||||
padding: 5px;
|
||||
}
|
||||
.SelectTrigger:focus {
|
||||
/* box-shadow: 0 0 0 2px black; */
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.SelectItem {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
color: var(--violet-11);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
padding: 0 35px 0 25px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
.SelectItem[data-disabled] {
|
||||
color: var(--mauve-8);
|
||||
pointer-events: none;
|
||||
}
|
||||
.SelectItem[data-highlighted] {
|
||||
outline: none;
|
||||
background-color: var(--violet-9);
|
||||
color: var(--violet-1);
|
||||
}
|
||||
.SelectTrigger[data-placeholder] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.SelectLabel {
|
||||
padding: 0 25px;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
color: var(--mauve-11);
|
||||
}
|
||||
.SelectIcon {
|
||||
color: Var(--violet-11);
|
||||
}
|
||||
|
||||
.SelectSeparator {
|
||||
height: 1px;
|
||||
background-color: var(--violet-6);
|
||||
margin: 5px;
|
||||
}
|
||||
.SelectContent {
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
|
||||
}
|
||||
|
||||
.SelectItemIndicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.SelectViewport {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.SelectScrollButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
color: var(--violet-11);
|
||||
cursor: default;
|
||||
}
|
||||
.SelectItem {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
color: var(--violet-11);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
padding: 0 35px 0 25px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.SelectItem[data-disabled] {
|
||||
color: var(--mauve-8);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.SelectItem[data-highlighted] {
|
||||
outline: none;
|
||||
background-color: var(--violet-9);
|
||||
color: var(--violet-1);
|
||||
}
|
||||
|
||||
.SelectLabel {
|
||||
padding: 0 25px;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
color: var(--mauve-11);
|
||||
}
|
||||
|
||||
.SelectSeparator {
|
||||
height: 1px;
|
||||
background-color: var(--violet-6);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.SelectItemIndicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.SelectScrollButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
color: var(--violet-11);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -637,9 +663,11 @@ option{
|
||||
width: 300px;
|
||||
height: 120px;
|
||||
}
|
||||
.penContainer{
|
||||
width: 300px;
|
||||
|
||||
.penContainer {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.uploadImgLogo {
|
||||
font-size: 30px;
|
||||
}
|
||||
@@ -660,9 +688,11 @@ option{
|
||||
width: 280px;
|
||||
height: 112px;
|
||||
}
|
||||
.penContainer{
|
||||
width: 280px;
|
||||
|
||||
.penContainer {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.hidePdf {
|
||||
display: none;
|
||||
}
|
||||
@@ -694,9 +724,11 @@ option{
|
||||
width: 230px;
|
||||
height: 92px;
|
||||
}
|
||||
.penContainer{
|
||||
width: 230px;
|
||||
|
||||
.penContainer {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.hidePdf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user