mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-19 22:25:51 +02:00
fix: ui design issue in mobile view
This commit is contained in:
RaktimaNXG
@@ -411,7 +411,6 @@ function RenderPdf({
|
||||
key={index}
|
||||
pageNumber={pageNumber}
|
||||
width={containerWH.width}
|
||||
height={containerWH.height}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
onGetAnnotationsError={(error) => {
|
||||
|
||||
@@ -375,7 +375,7 @@ export const addWidgetOptions = (type) => {
|
||||
};
|
||||
export const getWidgetType = (item, isHeader) => {
|
||||
return (
|
||||
<div className="op-btn w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
|
||||
<div className="op-btn w-fit md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
|
||||
<div className="w-full h-full flex md:justify-between items-center">
|
||||
<div className="flex justify-start items-center text-[13px] ml-1">
|
||||
{!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
|
||||
|
||||
@@ -1405,9 +1405,7 @@ function PdfRequestFiles() {
|
||||
? "none"
|
||||
: "auto"
|
||||
}}
|
||||
className=" min-h-screen
|
||||
relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300
|
||||
"
|
||||
className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
|
||||
>
|
||||
{!requestSignTour && requestSignTourFunction()}
|
||||
<ModalUi
|
||||
@@ -1549,7 +1547,7 @@ function PdfRequestFiles() {
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
{/* pdf render view */}
|
||||
<div className="min-h-screen w-full md:w-[57%] md:flex md:mr-4">
|
||||
<div className=" w-full md:w-[57%] flex mr-4">
|
||||
<PdfZoom
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
@@ -1558,7 +1556,7 @@ function PdfRequestFiles() {
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
/>
|
||||
<div className="min-h-screen w-full md:w-[97%] ">
|
||||
<div className=" w-full md:w-[95%] ">
|
||||
{/* this modal is used show this document is already sign */}
|
||||
<ModalUi
|
||||
isOpen={isCompleted.isModal}
|
||||
@@ -1707,10 +1705,11 @@ function PdfRequestFiles() {
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={divRef}
|
||||
data-tut="reactourSecond"
|
||||
className="h-[95%] 2xl:mt-[6px] mt-[3px]"
|
||||
className="h-[95%]"
|
||||
>
|
||||
{containerWH && (
|
||||
<RenderPdf
|
||||
@@ -1754,9 +1753,8 @@ function PdfRequestFiles() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="signerComponent"> */}
|
||||
<div
|
||||
className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar hidden md:inline-block`}
|
||||
className={`w-full md:w-[23%] bg-[#FFFFFF] overflow-y-auto hide-scrollbar hidden md:inline-block`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
{signedSigners.length > 0 && (
|
||||
|
||||
@@ -1728,11 +1728,7 @@ function PlaceHolderSign() {
|
||||
) : handleError ? (
|
||||
<HandleError handleError={handleError} />
|
||||
) : (
|
||||
<div
|
||||
className=" min-h-screen
|
||||
op-card overflow-hidden flex flex-row justify-between bg-base-300 relative
|
||||
"
|
||||
>
|
||||
<div>
|
||||
{isUiLoading && (
|
||||
<div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
|
||||
<Loader />
|
||||
@@ -1741,451 +1737,455 @@ function PlaceHolderSign() {
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* this component used for UI interaction and show their functionality */}
|
||||
{!checkTourStatus && (
|
||||
//this tour component used in your html component where you want to put
|
||||
//onRequestClose function to close tour
|
||||
//steps is defined what will be your messages and style also
|
||||
//isOpen is takes boolean value to open
|
||||
<div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
|
||||
{/* this component used for UI interaction and show their functionality */}
|
||||
{!checkTourStatus && (
|
||||
//this tour component used in your html component where you want to put
|
||||
//onRequestClose function to close tour
|
||||
//steps is defined what will be your messages and style also
|
||||
//isOpen is takes boolean value to open
|
||||
<Tour
|
||||
onRequestClose={closeTour}
|
||||
steps={tourConfig}
|
||||
isOpen={placeholderTour}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
)}
|
||||
<Tour
|
||||
onRequestClose={closeTour}
|
||||
steps={tourConfig}
|
||||
isOpen={placeholderTour}
|
||||
onRequestClose={() => setSignerExistModal(false)}
|
||||
steps={signerAssignTour}
|
||||
isOpen={signerExistModal}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
)}
|
||||
<Tour
|
||||
onRequestClose={() => setSignerExistModal(false)}
|
||||
steps={signerAssignTour}
|
||||
isOpen={signerExistModal}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
{/* this component used to render all pdf pages in left side */}
|
||||
<RenderAllPdfPage
|
||||
signPdfUrl={pdfDetails[0].URL}
|
||||
allPages={allPages}
|
||||
setAllPages={setAllPages}
|
||||
setPageNumber={setPageNumber}
|
||||
setSignBtnPosition={setSignBtnPosition}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
{/* pdf render view */}
|
||||
<div className="min-h-screen w-full md:w-[57%] flex md:mr-4">
|
||||
<PdfZoom
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
containerWH={containerWH}
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
{/* this component used to render all pdf pages in left side */}
|
||||
<RenderAllPdfPage
|
||||
signPdfUrl={pdfDetails[0].URL}
|
||||
allPages={allPages}
|
||||
setAllPages={setAllPages}
|
||||
setPageNumber={setPageNumber}
|
||||
setSignBtnPosition={setSignBtnPosition}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
<div className="min-h-screen w-full md:w-[97%] ">
|
||||
{/* this modal is used show alert set placeholder for all signers before send mail */}
|
||||
{/* pdf render view */}
|
||||
<div className=" w-full md:w-[57%] flex mr-4">
|
||||
<PdfZoom
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
containerWH={containerWH}
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
/>
|
||||
<div className=" w-full md:w-[95%] ">
|
||||
{/* this modal is used show alert set placeholder for all signers before send mail */}
|
||||
|
||||
<ModalUi
|
||||
isOpen={isSendAlert.alert}
|
||||
title={
|
||||
isSendAlert.mssg === "sure" ||
|
||||
isSendAlert.mssg === textWidget
|
||||
? "Fields required"
|
||||
: isSendAlert.mssg === "confirm" && "Send Mail"
|
||||
}
|
||||
handleClose={() => setIsSendAlert({})}
|
||||
showHeaderMessage={isSendAlert.mssg === "confirm"}
|
||||
>
|
||||
<div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
|
||||
{isSendAlert.mssg === "sure" ? (
|
||||
<span>
|
||||
Please ensure there's at least one signature widget
|
||||
added for all recipients.
|
||||
</span>
|
||||
) : isSendAlert.mssg === textWidget ? (
|
||||
<p>Please confirm that you have filled the text field.</p>
|
||||
) : (
|
||||
isSendAlert.mssg === "confirm" && (
|
||||
<>
|
||||
<ModalUi
|
||||
isOpen={isSendAlert.alert}
|
||||
title={
|
||||
isSendAlert.mssg === "sure" ||
|
||||
isSendAlert.mssg === textWidget
|
||||
? "Fields required"
|
||||
: isSendAlert.mssg === "confirm" && "Send Mail"
|
||||
}
|
||||
handleClose={() => setIsSendAlert({})}
|
||||
showHeaderMessage={isSendAlert.mssg === "confirm"}
|
||||
>
|
||||
<div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
|
||||
{isSendAlert.mssg === "sure" ? (
|
||||
<span>
|
||||
Please ensure there's at least one signature
|
||||
widget added for all recipients.
|
||||
</span>
|
||||
) : isSendAlert.mssg === textWidget ? (
|
||||
<p>
|
||||
Please confirm that you have filled the text field.
|
||||
</p>
|
||||
) : (
|
||||
isSendAlert.mssg === "confirm" && (
|
||||
<>
|
||||
{!isCustomize && (
|
||||
<span>
|
||||
Are you sure you want to send out this document
|
||||
for signatures?
|
||||
</span>
|
||||
)}
|
||||
{isCustomize &&
|
||||
(!isEnableSubscription || isSubscribe) && (
|
||||
<>
|
||||
<EmailBody
|
||||
editorRef={editorRef}
|
||||
requestBody={requestBody}
|
||||
requestSubject={requestSubject}
|
||||
handleOnchangeRequest={
|
||||
handleOnchangeRequest
|
||||
}
|
||||
setRequestSubject={setRequestSubject}
|
||||
/>
|
||||
<div
|
||||
className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
|
||||
onClick={() => {
|
||||
setRequestBody(defaultBody);
|
||||
setRequestSubject(defaultSubject);
|
||||
}}
|
||||
>
|
||||
<span>Reset to default</span>
|
||||
</div>
|
||||
</>
|
||||
<>
|
||||
{!isCustomize && (
|
||||
<span>
|
||||
Are you sure you want to send out this
|
||||
document for signatures?
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className={
|
||||
"flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
|
||||
}
|
||||
>
|
||||
<div className="flex flex-row gap-2">
|
||||
<button
|
||||
onClick={() => sendEmailToSigners()}
|
||||
className="op-btn op-btn-primary font-[500] text-sm shadow"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
{isCustomize && (
|
||||
{isCustomize &&
|
||||
(!isEnableSubscription || isSubscribe) && (
|
||||
<>
|
||||
<EmailBody
|
||||
editorRef={editorRef}
|
||||
requestBody={requestBody}
|
||||
requestSubject={requestSubject}
|
||||
handleOnchangeRequest={
|
||||
handleOnchangeRequest
|
||||
}
|
||||
setRequestSubject={setRequestSubject}
|
||||
/>
|
||||
<div
|
||||
className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
|
||||
onClick={() => {
|
||||
setRequestBody(defaultBody);
|
||||
setRequestSubject(defaultSubject);
|
||||
}}
|
||||
>
|
||||
<span>Reset to default</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={
|
||||
"flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
|
||||
}
|
||||
>
|
||||
<div className="flex flex-row gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCustomize(false);
|
||||
}}
|
||||
className="op-btn op-btn-ghost font-[500] text-sm"
|
||||
onClick={() => sendEmailToSigners()}
|
||||
className="op-btn op-btn-primary font-[500] text-sm shadow"
|
||||
>
|
||||
Close
|
||||
Send
|
||||
</button>
|
||||
{isCustomize && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCustomize(false);
|
||||
}}
|
||||
className="op-btn op-btn-ghost font-[500] text-sm"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isCustomize &&
|
||||
(isSubscribe || !isEnableSubscription) && (
|
||||
<span
|
||||
className="op-link op-link-accent text-sm"
|
||||
onClick={() => {
|
||||
setIsCustomize(!isCustomize);
|
||||
}}
|
||||
>
|
||||
Cutomize Email
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<div className="mt-2">
|
||||
<Upgrade
|
||||
message="Upgrade to customize Email"
|
||||
newWindow={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isCustomize &&
|
||||
(isSubscribe || !isEnableSubscription) && (
|
||||
<span
|
||||
className="op-link op-link-accent text-sm"
|
||||
onClick={() => {
|
||||
setIsCustomize(!isCustomize);
|
||||
}}
|
||||
>
|
||||
Cutomize Email
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<div className="mt-2">
|
||||
<Upgrade
|
||||
message="Upgrade to customize Email"
|
||||
newWindow={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
|
||||
{isSendAlert.mssg === "confirm" && (
|
||||
<>
|
||||
<div className="flex justify-center items-center mt-3">
|
||||
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
|
||||
<span className="ml-[5px] mr-[5px]">or</span>
|
||||
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
|
||||
</div>
|
||||
<div className="mt-3 mb-3">{handleShareList()}</div>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
|
||||
{isSendAlert.mssg === "confirm" && (
|
||||
<>
|
||||
<div className="flex justify-center items-center mt-3">
|
||||
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
|
||||
<span className="ml-[5px] mr-[5px]">or</span>
|
||||
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
|
||||
{/* this modal is used show send mail message and after send mail success message */}
|
||||
<ModalUi
|
||||
isOpen={isSend}
|
||||
title={"Mails Sent"}
|
||||
handleClose={() => {
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
>
|
||||
<div className="h-[100%] p-[20px]">
|
||||
{mailStatus === "success" ? (
|
||||
<div className="text-center mb-[10px]">
|
||||
<DotLottieReact
|
||||
dotLottieRefCallback={null}
|
||||
src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
|
||||
autoplay
|
||||
loop={false}
|
||||
className="w-[120px] h-[120px] mx-auto"
|
||||
/>
|
||||
<p>
|
||||
You have successfully sent mails to all recipients!
|
||||
</p>
|
||||
{isCurrUser && (
|
||||
<p>Do you want to sign documents right now ?</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 mb-3">{handleShareList()}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
) : (
|
||||
<p>Please setup mail adapter to send mail!</p>
|
||||
)}
|
||||
{!mailStatus && (
|
||||
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
|
||||
)}
|
||||
{isCurrUser && (
|
||||
<button
|
||||
onClick={() => {
|
||||
handleRecipientSign();
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary mr-1"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* this modal is used show send mail message and after send mail success message */}
|
||||
<ModalUi
|
||||
isOpen={isSend}
|
||||
title={"Mails Sent"}
|
||||
handleClose={() => {
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
>
|
||||
<div className="h-[100%] p-[20px]">
|
||||
{mailStatus === "success" ? (
|
||||
<div className="text-center mb-[10px]">
|
||||
<DotLottieReact
|
||||
dotLottieRefCallback={null}
|
||||
src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
|
||||
autoplay
|
||||
loop={false}
|
||||
className="w-[120px] h-[120px] mx-auto"
|
||||
/>
|
||||
<p>
|
||||
You have successfully sent mails to all recipients!
|
||||
</p>
|
||||
{isCurrUser && (
|
||||
<p>Do you want to sign documents right now ?</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p>Please setup mail adapter to send mail!</p>
|
||||
)}
|
||||
{!mailStatus && (
|
||||
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
|
||||
)}
|
||||
{isCurrUser && (
|
||||
<button
|
||||
onClick={() => {
|
||||
handleRecipientSign();
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary mr-1"
|
||||
className="op-btn op-btn-ghost"
|
||||
>
|
||||
Yes
|
||||
{isCurrUser ? "No" : "Close"}
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
isOpen={isShowEmail}
|
||||
title={"signers alert"}
|
||||
handleClose={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
>
|
||||
<div className="h-[100%] p-[20px]">
|
||||
<p>Please select signer for add placeholder!</p>
|
||||
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<PlaceholderCopy
|
||||
isPageCopy={isPageCopy}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
xyPostion={signerPos}
|
||||
setXyPostion={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
Id={uniqueId}
|
||||
widgetType={widgetType}
|
||||
setUniqueId={setUniqueId}
|
||||
tempSignerId={tempSignerId}
|
||||
setTempSignerId={setTempSignerId}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type={radioButtonWidget}
|
||||
title="Radio group"
|
||||
showDropdown={isRadio}
|
||||
setShowDropdown={setIsRadio}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
showDropdown={isCheckbox}
|
||||
setShowDropdown={setIsCheckbox}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="dropdown"
|
||||
title="Dropdown options"
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
isPlaceholder={true}
|
||||
pageNumber={pageNumber}
|
||||
allPages={allPages}
|
||||
changePage={changePage}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isMailSend={isMailSend}
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={divRef}
|
||||
data-tut="reactourSecond"
|
||||
className="h-[95%]"
|
||||
>
|
||||
{containerWH && (
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
setPdfLoadFail={setPdfLoadFail}
|
||||
pdfLoadFail={pdfLoadFail}
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
setIsResize={setIsResize}
|
||||
setZIndex={setZIndex}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
signersdata={signersdata}
|
||||
setSignKey={setSignKey}
|
||||
setSignerObjId={setSignerObjId}
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
handleNameModal={setIsNameModal}
|
||||
setTempSignerId={setTempSignerId}
|
||||
uniqueId={uniqueId}
|
||||
setPdfRenderHeight={setPdfRenderHeight}
|
||||
pdfRenderHeight={pdfRenderHeight}
|
||||
handleTextSettingModal={handleTextSettingModal}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-ghost"
|
||||
>
|
||||
{isCurrUser ? "No" : "Close"}
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
isOpen={isShowEmail}
|
||||
title={"signers alert"}
|
||||
handleClose={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
>
|
||||
<div className="h-[100%] p-[20px]">
|
||||
<p>Please select signer for add placeholder!</p>
|
||||
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<PlaceholderCopy
|
||||
isPageCopy={isPageCopy}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
xyPostion={signerPos}
|
||||
setXyPostion={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
Id={uniqueId}
|
||||
widgetType={widgetType}
|
||||
setUniqueId={setUniqueId}
|
||||
tempSignerId={tempSignerId}
|
||||
setTempSignerId={setTempSignerId}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type={radioButtonWidget}
|
||||
title="Radio group"
|
||||
showDropdown={isRadio}
|
||||
setShowDropdown={setIsRadio}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
showDropdown={isCheckbox}
|
||||
setShowDropdown={setIsCheckbox}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="dropdown"
|
||||
title="Dropdown options"
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
isPlaceholder={true}
|
||||
pageNumber={pageNumber}
|
||||
allPages={allPages}
|
||||
changePage={changePage}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isMailSend={isMailSend}
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
<div
|
||||
ref={divRef}
|
||||
data-tut="reactourSecond"
|
||||
className="h-[95%] "
|
||||
>
|
||||
{containerWH && (
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
setPdfLoadFail={setPdfLoadFail}
|
||||
pdfLoadFail={pdfLoadFail}
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
setIsResize={setIsResize}
|
||||
setZIndex={setZIndex}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
signersdata={signersdata}
|
||||
setSignKey={setSignKey}
|
||||
setSignerObjId={setSignerObjId}
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
handleNameModal={setIsNameModal}
|
||||
setTempSignerId={setTempSignerId}
|
||||
uniqueId={uniqueId}
|
||||
setPdfRenderHeight={setPdfRenderHeight}
|
||||
pdfRenderHeight={pdfRenderHeight}
|
||||
handleTextSettingModal={handleTextSettingModal}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* signature button */}
|
||||
<div
|
||||
className={`w-[23%] bg-[#FFFFFF] min-h-screen autoSignScroll hide-scrollbar`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
{isMobile ? (
|
||||
<div>
|
||||
<WidgetComponent
|
||||
dataTut="reactourFirst"
|
||||
dataTut2="reactourSecond"
|
||||
pdfUrl={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
isSigners={true}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
initial={true}
|
||||
sendInOrder={pdfDetails[0].SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
setIsAddSigner={setIsAddSigner}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div
|
||||
className="hidden md:block w-full h-full bg-base-100"
|
||||
aria-disabled
|
||||
>
|
||||
<SignerListPlace
|
||||
{/* signature button */}
|
||||
<div
|
||||
className={`w-full md:w-[23%] bg-[#FFFFFF] overflow-y-auto hide-scrollbar`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
{isMobile ? (
|
||||
<div>
|
||||
<WidgetComponent
|
||||
dataTut="reactourFirst"
|
||||
dataTut2="reactourSecond"
|
||||
pdfUrl={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
isSigners={true}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
initial={true}
|
||||
sendInOrder={pdfDetails[0].SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
isMailSend={isMailSend}
|
||||
setIsAddSigner={setIsAddSigner}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
roleName={roleName}
|
||||
// handleAddSigner={handleAddSigner}
|
||||
/>
|
||||
<div data-tut="reactourSecond">
|
||||
<WidgetComponent
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div
|
||||
className="hidden md:block w-full h-full bg-base-100"
|
||||
aria-disabled
|
||||
>
|
||||
<SignerListPlace
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
sendInOrder={pdfDetails[0].SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
isMailSend={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
initial={true}
|
||||
setIsAddSigner={setIsAddSigner}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
roleName={roleName}
|
||||
// handleAddSigner={handleAddSigner}
|
||||
/>
|
||||
<div data-tut="reactourSecond">
|
||||
<WidgetComponent
|
||||
isMailSend={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
initial={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DndProvider>
|
||||
<div>
|
||||
|
||||
<ModalUi
|
||||
isOpen={isAlreadyPlace.status}
|
||||
title={"Document Alert"}
|
||||
@@ -2235,7 +2235,7 @@ function PlaceHolderSign() {
|
||||
handleData={handleWidgetdefaultdata}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
</div>
|
||||
</DndProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -456,13 +456,10 @@ function SignYourSelf() {
|
||||
);
|
||||
const dragTypeValue = item?.text ? item.text : monitor.type;
|
||||
const widgetValue = getWidgetValue(dragTypeValue);
|
||||
const widgetWidth = defaultWidthHeight(dragTypeValue).width;
|
||||
const widgetHeight = defaultWidthHeight(dragTypeValue).height;
|
||||
const widgetTypeExist = ["name", "company", "job title", "email"].includes(
|
||||
dragTypeValue
|
||||
);
|
||||
// const scale = pdfOriginalWH.width / containerWH.width;
|
||||
const containerScale = containerWH.width / pdfOriginalWH.width;
|
||||
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
|
||||
|
||||
if (item === "onclick") {
|
||||
const getWidth = widgetTypeExist
|
||||
@@ -476,17 +473,12 @@ function SignYourSelf() {
|
||||
? defaultWidthHeight(dragTypeValue).height
|
||||
: "";
|
||||
dropObj = {
|
||||
xPosition:
|
||||
(containerWH.width / 2 - widgetWidth / 2) / (containerScale * scale),
|
||||
yPosition:
|
||||
(containerWH.height / 2 - widgetHeight / 2) /
|
||||
(containerScale * scale),
|
||||
isDrag: false,
|
||||
xPosition: containerWH.width / 2,
|
||||
yPosition: containerWH.height / 2,
|
||||
isStamp:
|
||||
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
|
||||
key: key,
|
||||
type: dragTypeValue,
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
scale: containerScale,
|
||||
Width: getWidth / (containerScale * scale),
|
||||
Height: getHeight / (containerScale * scale),
|
||||
@@ -535,16 +527,12 @@ function SignYourSelf() {
|
||||
return object.pageNumber === pageNumber;
|
||||
});
|
||||
const updateData = filterDropPos[0].pos;
|
||||
|
||||
// if (updateData.length > dropData.length) {
|
||||
const newSignPos = updateData.concat(dropData);
|
||||
let xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: newSignPos
|
||||
};
|
||||
xyPostion.splice(index, 1, xyPos);
|
||||
|
||||
// }
|
||||
} else {
|
||||
const xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
@@ -1385,7 +1373,7 @@ function SignYourSelf() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`w-full md:w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
|
||||
className={`w-full md:w-[23%] bg-[#FFFFFF] overflow-y-auto hide-scrollbar`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
{!isCompleted ? (
|
||||
|
||||
@@ -1284,7 +1284,7 @@ const TemplatePlaceholder = () => {
|
||||
setIsTextSetting(value);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Title title={"Template"} />
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{isLoading.isLoad ? (
|
||||
@@ -1292,378 +1292,385 @@ const TemplatePlaceholder = () => {
|
||||
) : handleError ? (
|
||||
<HandleError handleError={handleError} />
|
||||
) : (
|
||||
<div className="flex min-h-screen flex-row justify-center op-card overflow-hidden bg-base-300 relative">
|
||||
{/* this component used for UI interaction and show their functionality */}
|
||||
{!checkTourStatus && (
|
||||
//this tour component used in your html component where you want to put
|
||||
//onRequestClose function to close tour
|
||||
//steps is defined what will be your messages and style also
|
||||
//isOpen is takes boolean value to open
|
||||
<Tour
|
||||
onRequestClose={closeTour}
|
||||
steps={tourConfig}
|
||||
isOpen={templateTour}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
<div>
|
||||
<div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
|
||||
{/* this component used for UI interaction and show their functionality */}
|
||||
{!checkTourStatus && (
|
||||
//this tour component used in your html component where you want to put
|
||||
//onRequestClose function to close tour
|
||||
//steps is defined what will be your messages and style also
|
||||
//isOpen is takes boolean value to open
|
||||
<Tour
|
||||
onRequestClose={closeTour}
|
||||
steps={tourConfig}
|
||||
isOpen={templateTour}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
)}
|
||||
{isAddRole && (
|
||||
<Tour
|
||||
onRequestClose={() => setIsAddRole(false)}
|
||||
steps={tourAddRole}
|
||||
isOpen={isAddRole}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
)}
|
||||
{/* this component used to render all pdf pages in left side */}
|
||||
<RenderAllPdfPage
|
||||
signPdfUrl={pdfDetails[0].URL}
|
||||
allPages={allPages}
|
||||
setAllPages={setAllPages}
|
||||
setPageNumber={setPageNumber}
|
||||
setSignBtnPosition={setSignBtnPosition}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
)}
|
||||
{isAddRole && (
|
||||
<Tour
|
||||
onRequestClose={() => setIsAddRole(false)}
|
||||
steps={tourAddRole}
|
||||
isOpen={isAddRole}
|
||||
rounded={5}
|
||||
closeWithMask={false}
|
||||
/>
|
||||
)}
|
||||
{/* this component used to render all pdf pages in left side */}
|
||||
<RenderAllPdfPage
|
||||
signPdfUrl={pdfDetails[0].URL}
|
||||
allPages={allPages}
|
||||
setAllPages={setAllPages}
|
||||
setPageNumber={setPageNumber}
|
||||
setSignBtnPosition={setSignBtnPosition}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
|
||||
{/* pdf render view */}
|
||||
<div className="min-h-screen w-full md:w-[57%] flex md:mr-4">
|
||||
<PdfZoom
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
containerWH={containerWH}
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
/>
|
||||
<div className="min-h-screen w-full md:w-[97%] ">
|
||||
{/* this modal is used show alert set placeholder for all signers before send mail */}
|
||||
<ModalUi
|
||||
isOpen={isSendAlert}
|
||||
title={"Fields required"}
|
||||
handleClose={() => setIsSendAlert(false)}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>
|
||||
Please add at least one signature field for all roles.
|
||||
</p>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
isOpen={!IsReceipent}
|
||||
title={"Roles"}
|
||||
handleClose={() => setIsReceipent(true)}
|
||||
>
|
||||
<div className="h-full p-[20px] text-center font-medium">
|
||||
<p>Please add roles first</p>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* this modal is used show send mail message and after send mail success message */}
|
||||
<ModalUi
|
||||
isOpen={isCreateDocModal}
|
||||
title={"Create Document"}
|
||||
handleClose={() => setIsCreateDocModal(false)}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>
|
||||
Do you want to create a document using the template you
|
||||
just created ?
|
||||
</p>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
{currentEmail.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleCreateDocModal();
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCreateDocModal(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-secondary ml-2"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
{/* pdf render view */}
|
||||
<div className=" w-full md:w-[57%] flex mr-4">
|
||||
<PdfZoom
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
containerWH={containerWH}
|
||||
setZoomPercent={setZoomPercent}
|
||||
zoomPercent={zoomPercent}
|
||||
/>
|
||||
<div className=" w-full md:w-[95%] ">
|
||||
{/* this modal is used show alert set placeholder for all signers before send mail */}
|
||||
<ModalUi
|
||||
isOpen={isSendAlert}
|
||||
title={"Fields required"}
|
||||
handleClose={() => setIsSendAlert(false)}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>
|
||||
Please add at least one signature field for all roles.
|
||||
</p>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
isOpen={!IsReceipent}
|
||||
title={"Roles"}
|
||||
handleClose={() => setIsReceipent(true)}
|
||||
>
|
||||
<div className="h-full p-[20px] text-center font-medium">
|
||||
<p>Please add roles first</p>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* this modal is used show send mail message and after send mail success message */}
|
||||
<ModalUi
|
||||
isOpen={isCreateDocModal}
|
||||
title={"Create Document"}
|
||||
handleClose={() => setIsCreateDocModal(false)}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>
|
||||
Do you want to create a document using the template you
|
||||
just created ?
|
||||
</p>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
{currentEmail.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleCreateDocModal();
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCreateDocModal(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-secondary ml-2"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
{isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
|
||||
<ModalUi
|
||||
isOpen={isShowEmail}
|
||||
title={"signers alert"}
|
||||
handleClose={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>Please select signer for add placeholder!</p>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<DropdownWidgetOption
|
||||
type={radioButtonWidget}
|
||||
title="Radio group"
|
||||
showDropdown={isRadio}
|
||||
setShowDropdown={setIsRadio}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
showDropdown={isCheckbox}
|
||||
setShowDropdown={setIsCheckbox}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="dropdown"
|
||||
title="Dropdown options"
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<PlaceholderCopy
|
||||
isPageCopy={isPageCopy}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
xyPostion={signerPos}
|
||||
setXyPostion={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
// signerObjId={signerObjId}
|
||||
Id={uniqueId}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
completeBtnTitle={"Save"}
|
||||
isPlaceholder={true}
|
||||
pageNumber={pageNumber}
|
||||
allPages={allPages}
|
||||
changePage={changePage}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isMailSend={isMailSend}
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
setIsEditTemplate={handleEditTemplateModal}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
<div
|
||||
ref={divRef}
|
||||
data-tut="reactourThird"
|
||||
className="h-[95%]"
|
||||
>
|
||||
{containerWH && (
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
setPdfLoadFail={setPdfLoadFail}
|
||||
pdfLoadFail={pdfLoadFail}
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
setIsResize={setIsResize}
|
||||
setZIndex={setZIndex}
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
signersdata={signersdata}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
setSignKey={setSignKey}
|
||||
setSignerObjId={setSignerObjId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
handleNameModal={setIsNameModal}
|
||||
setPdfRenderHeight={setPdfRenderHeight}
|
||||
pdfRenderHeight={pdfRenderHeight}
|
||||
handleTextSettingModal={handleTextSettingModal}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
{isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
|
||||
<ModalUi
|
||||
isOpen={isShowEmail}
|
||||
title={"signers alert"}
|
||||
handleClose={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
>
|
||||
<div className="h-full p-[20px]">
|
||||
<p>Please select signer for add placeholder!</p>
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsShowEmail(false);
|
||||
}}
|
||||
type="button"
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<DropdownWidgetOption
|
||||
type={radioButtonWidget}
|
||||
title="Radio group"
|
||||
showDropdown={isRadio}
|
||||
setShowDropdown={setIsRadio}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
showDropdown={isCheckbox}
|
||||
setShowDropdown={setIsCheckbox}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
type="dropdown"
|
||||
title="Dropdown options"
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
handleClose={handleNameModal}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<PlaceholderCopy
|
||||
isPageCopy={isPageCopy}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
xyPostion={signerPos}
|
||||
setXyPostion={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
// signerObjId={signerObjId}
|
||||
Id={uniqueId}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
completeBtnTitle={"Save"}
|
||||
isPlaceholder={true}
|
||||
pageNumber={pageNumber}
|
||||
allPages={allPages}
|
||||
changePage={changePage}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isMailSend={isMailSend}
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
setIsEditTemplate={handleEditTemplateModal}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
<div ref={divRef} data-tut="reactourThird" className="h-[95%]">
|
||||
{containerWH && (
|
||||
<RenderPdf
|
||||
pageNumber={pageNumber}
|
||||
pdfNewWidth={pdfNewWidth}
|
||||
pdfDetails={pdfDetails}
|
||||
signerPos={signerPos}
|
||||
successEmail={false}
|
||||
numPages={numPages}
|
||||
pageDetails={pageDetails}
|
||||
placeholder={true}
|
||||
drop={drop}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
setPdfLoadFail={setPdfLoadFail}
|
||||
pdfLoadFail={pdfLoadFail}
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
setIsResize={setIsResize}
|
||||
setZIndex={setZIndex}
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
signersdata={signersdata}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
setSignKey={setSignKey}
|
||||
setSignerObjId={setSignerObjId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
handleNameModal={setIsNameModal}
|
||||
setPdfRenderHeight={setPdfRenderHeight}
|
||||
pdfRenderHeight={pdfRenderHeight}
|
||||
handleTextSettingModal={handleTextSettingModal}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* signature button */}
|
||||
{isMobile ? (
|
||||
<div>
|
||||
<WidgetComponent
|
||||
dataTut="reactourFirst"
|
||||
dataTut2="reactourSecond"
|
||||
pdfUrl={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
isSigners={isSigners}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
handleAddSigner={handleAddSigner}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
title={"Roles"}
|
||||
initial={true}
|
||||
isTemplateFlow={true}
|
||||
sendInOrder={pdfDetails[0].SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
<SignerListPlace
|
||||
isMailSend={isMailSend}
|
||||
{/* signature button */}
|
||||
{isMobile ? (
|
||||
<div>
|
||||
<WidgetComponent
|
||||
dataTut="reactourFirst"
|
||||
dataTut2="reactourSecond"
|
||||
pdfUrl={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setRoleName={setRoleName}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
isSigners={isSigners}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
handleAddSigner={handleAddSigner}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
title={"Roles"}
|
||||
sendInOrder={pdfDetails[0]?.SendinOrder}
|
||||
initial={true}
|
||||
isTemplateFlow={true}
|
||||
sendInOrder={pdfDetails[0].SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
/>
|
||||
<div data-tut="reactourSecond">
|
||||
<WidgetComponent
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
|
||||
>
|
||||
<div className={`max-h-screen`}>
|
||||
<SignerListPlace
|
||||
isMailSend={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setRoleName={setRoleName}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
handleAddSigner={handleAddSigner}
|
||||
setUniqueId={setUniqueId}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
title={"Roles"}
|
||||
initial={true}
|
||||
isTemplateFlow={true}
|
||||
sendInOrder={pdfDetails[0]?.SendinOrder}
|
||||
setSignersData={setSignersData}
|
||||
blockColor={blockColor}
|
||||
setBlockColor={setBlockColor}
|
||||
/>
|
||||
<div data-tut="reactourSecond">
|
||||
<WidgetComponent
|
||||
isMailSend={isMailSend}
|
||||
dragSignature={dragSignature}
|
||||
signRef={signRef}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
isDragSign={isDragSign}
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={false}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
title={"Roles"}
|
||||
initial={true}
|
||||
isTemplateFlow={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div data-tut="reactourAddbtn--observe">
|
||||
<AddRoleModal
|
||||
isModalRole={isModalRole}
|
||||
roleName={roleName}
|
||||
signersdata={signersdata}
|
||||
setRoleName={setRoleName}
|
||||
handleAddRole={handleAddRole}
|
||||
handleCloseRoleModal={handleCloseRoleModal}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<LinkUserModal
|
||||
handleAddUser={handleAddUser}
|
||||
isAddUser={isAddUser}
|
||||
uniqueId={uniqueId}
|
||||
closePopup={closePopup}
|
||||
signersData={signersdata}
|
||||
/>
|
||||
</div>
|
||||
<ModalUi
|
||||
title={"Edit Template"}
|
||||
isOpen={isEditTemplate}
|
||||
handleClose={handleEditTemplateModal}
|
||||
>
|
||||
<EditTemplate
|
||||
template={pdfDetails?.[0]}
|
||||
onSuccess={handleEditTemplateForm}
|
||||
/>
|
||||
</ModalUi>
|
||||
<WidgetNameModal
|
||||
widgetName={widgetName}
|
||||
defaultdata={currWidgetsDetails}
|
||||
isOpen={isNameModal}
|
||||
handleClose={handleNameModal}
|
||||
handleData={handleWidgetdefaultdata}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<TextFontSetting
|
||||
isTextSetting={isTextSetting}
|
||||
setIsTextSetting={setIsTextSetting}
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
fontColor={fontColor}
|
||||
setFontColor={setFontColor}
|
||||
handleSaveFontSize={handleSaveFontSize}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
</DndProvider>
|
||||
<div data-tut="reactourAddbtn--observe">
|
||||
<AddRoleModal
|
||||
isModalRole={isModalRole}
|
||||
roleName={roleName}
|
||||
signersdata={signersdata}
|
||||
setRoleName={setRoleName}
|
||||
handleAddRole={handleAddRole}
|
||||
handleCloseRoleModal={handleCloseRoleModal}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<LinkUserModal
|
||||
handleAddUser={handleAddUser}
|
||||
isAddUser={isAddUser}
|
||||
uniqueId={uniqueId}
|
||||
closePopup={closePopup}
|
||||
signersData={signersdata}
|
||||
/>
|
||||
</div>
|
||||
<ModalUi
|
||||
title={"Edit Template"}
|
||||
isOpen={isEditTemplate}
|
||||
handleClose={handleEditTemplateModal}
|
||||
>
|
||||
<EditTemplate
|
||||
template={pdfDetails?.[0]}
|
||||
onSuccess={handleEditTemplateForm}
|
||||
/>
|
||||
</ModalUi>
|
||||
<WidgetNameModal
|
||||
widgetName={widgetName}
|
||||
defaultdata={currWidgetsDetails}
|
||||
isOpen={isNameModal}
|
||||
handleClose={handleNameModal}
|
||||
handleData={handleWidgetdefaultdata}
|
||||
isSubscribe={isSubscribe}
|
||||
/>
|
||||
<TextFontSetting
|
||||
isTextSetting={isTextSetting}
|
||||
setIsTextSetting={setIsTextSetting}
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
fontColor={fontColor}
|
||||
setFontColor={setFontColor}
|
||||
handleSaveFontSize={handleSaveFontSize}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user