fix: widgets disappear issue in request sign flow

This commit is contained in:
RaktimaNXG
2024-06-21 20:18:12 +05:30
parent e0e7dd5298
commit 09b39a467b
6 changed files with 43 additions and 88 deletions
@@ -13,11 +13,7 @@ const RenderDebugPdf = (props) => {
>
<Document
onLoadError={() => {
const load = {
status: false,
type: "failed"
};
props.setPdfLoadFail(load);
props.setPdfLoadFail(false);
}}
loading={"Loading Document.."}
onLoadSuccess={props.pageDetails}
+9 -22
View File
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React from "react";
import RSC from "react-scrollbars-custom";
import { Document, Page } from "react-pdf";
import {
@@ -28,7 +28,8 @@ function RenderPdf({
pdfRequest,
signerObjectId,
signedSigners,
setPdfLoadFail,
pdfLoad,
setPdfLoad,
placeholder,
setSignerPos,
setXyPostion,
@@ -55,12 +56,9 @@ function RenderPdf({
handleTextSettingModal,
setTempSignerId,
uniqueId,
setPdfRenderHeight,
pdfOriginalWH,
scale
}) {
const [isLoadPdf, setIsLoadPdf] = useState(false);
const isMobile = window.innerWidth < 767;
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
const isGuestSigner = localStorage.getItem("isGuestSigner");
@@ -255,8 +253,8 @@ function RenderPdf({
ref={drop}
id="container"
>
{isLoadPdf &&
containerWH?.width &&
{containerWH?.width &&
pdfOriginalWH.length > 0 &&
(pdfRequest
? signerPos.map((data, key) => {
return (
@@ -387,7 +385,7 @@ function RenderPdf({
<div className="flex items-center justify-center">
<Document
onLoadError={() => {
setPdfLoadFail(true);
setPdfLoad(false);
}}
loading={"Loading Document.."}
onLoadSuccess={pageDetails}
@@ -406,10 +404,6 @@ function RenderPdf({
}
>
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
pageNumber={pageNumber}
width={containerWH.width}
@@ -440,8 +434,9 @@ function RenderPdf({
ref={drop}
id="container"
>
{isLoadPdf &&
{pdfLoad &&
containerWH?.width &&
pdfOriginalWH.length > 0 &&
(pdfRequest //pdf request sign flow
? signerPos?.map((data, key) => {
return (
@@ -576,11 +571,7 @@ function RenderPdf({
{/* this component for render pdf document is in middle of the component */}
<Document
onLoadError={() => {
const load = {
status: false,
type: "failed"
};
setPdfLoadFail(load);
pdfLoad(false);
}}
loading={"Loading Document.."}
onLoadSuccess={pageDetails}
@@ -599,10 +590,6 @@ function RenderPdf({
}
>
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
width={containerWH.width}
scale={scale || 1}
+8 -15
View File
@@ -110,10 +110,7 @@ function PdfRequestFiles() {
});
const [myInitial, setMyInitial] = useState("");
const [isInitial, setIsInitial] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [pdfLoad, setPdfLoad] = useState(false);
const [isSigned, setIsSigned] = useState(false);
const [isExpired, setIsExpired] = useState(false);
const [alreadySign, setAlreadySign] = useState(false);
@@ -129,7 +126,6 @@ function PdfRequestFiles() {
const [isVerifyModal, setIsVerifyModal] = useState(false);
const [otp, setOtp] = useState("");
const [contractName, setContractName] = useState("");
const [pdfRenderHeight, setPdfRenderHeight] = useState();
const [zoomPercent, setZoomPercent] = useState(0);
const [totalZoomPercent, setTotalZoomPercent] = useState();
const [scale, setScale] = useState(1);
@@ -1020,16 +1016,15 @@ function PdfRequestFiles() {
//function for get pdf page details
const pageDetails = async (pdf) => {
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const totalPages = pdf.numPages; // Get the total number of pages
for (let index = 0; index < totalPages; index++) {
const getPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
const { width, height } = getPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
setPdfLoad(true);
};
//function for change page
function changePage(offset) {
@@ -1733,8 +1728,8 @@ function PdfRequestFiles() {
pdfRequest={true}
signerObjectId={signerObjectId}
signedSigners={signedSigners}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setPdfLoad={setPdfLoad}
pdfLoad={pdfLoad}
setSignerPos={setSignerPos}
containerWH={containerWH}
setIsInitial={setIsInitial}
@@ -1744,8 +1739,6 @@ function PdfRequestFiles() {
selectWidgetId={selectWidgetId}
setCurrWidgetsDetails={setCurrWidgetsDetails}
divRef={divRef}
setPdfRenderHeight={setPdfRenderHeight}
pdfRenderHeight={pdfRenderHeight}
setIsResize={setIsResize}
isResize={isResize}
setTotalZoomPercent={setTotalZoomPercent}
+8 -15
View File
@@ -104,10 +104,7 @@ function PlaceHolderSign() {
const [defaultBody, setDefaultBody] = useState("");
const [defaultSubject, setDefaultSubject] = useState("");
const [isTextSetting, setIsTextSetting] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [pdfLoad, setPdfLoad] = useState(false);
const [isPageCopy, setIsPageCopy] = useState(false);
const [uniqueId, setUniqueId] = useState("");
const [roleName, setRoleName] = useState("");
@@ -131,7 +128,6 @@ function PlaceHolderSign() {
const [requestBody, setRequestBody] = useState("");
const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
const isHeader = useSelector((state) => state.showHeader);
const [pdfRenderHeight, setPdfRenderHeight] = useState();
const [activeMailAdapter, setActiveMailAdapter] = useState("");
const [isAlreadyPlace, setIsAlreadyPlace] = useState({
status: false,
@@ -664,16 +660,15 @@ function PlaceHolderSign() {
//function for get pdf page details
const pageDetails = async (pdf) => {
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const totalPages = pdf?.numPages;
for (let index = 0; index < totalPages; index++) {
const getPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
const { width, height } = getPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
setPdfLoad(true);
};
//function for save x and y position and show signature tab on that position
@@ -2075,8 +2070,8 @@ function PlaceHolderSign() {
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setPdfLoad={setPdfLoad}
pdfLoad={pdfLoad}
setSignerPos={setSignerPos}
containerWH={containerWH}
setIsResize={setIsResize}
@@ -2098,8 +2093,6 @@ function PlaceHolderSign() {
handleNameModal={setIsNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
setPdfRenderHeight={setPdfRenderHeight}
pdfRenderHeight={pdfRenderHeight}
handleTextSettingModal={handleTextSettingModal}
pdfOriginalWH={pdfOriginalWH}
setScale={setScale}
+9 -16
View File
@@ -106,10 +106,7 @@ function SignYourSelf() {
const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
const [isCheckbox, setIsCheckbox] = useState(false);
const [widgetType, setWidgetType] = useState("");
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [pdfLoad, setPdfLoad] = useState(false);
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isDontShow, setIsDontShow] = useState(false);
const [extUserId, setExtUserId] = useState("");
@@ -120,7 +117,6 @@ function SignYourSelf() {
const [isEmailVerified, setIsEmailVerified] = useState(true);
const [isVerifyModal, setIsVerifyModal] = useState(false);
const [otp, setOtp] = useState("");
const [pdfRenderHeight, setPdfRenderHeight] = useState();
const [zoomPercent, setZoomPercent] = useState(0);
const isHeader = useSelector((state) => state.showHeader);
const [scale, setScale] = useState(1);
@@ -854,16 +850,15 @@ function SignYourSelf() {
//function for get pdf page details
const pageDetails = async (pdf) => {
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const totalPages = pdf?.numPages;
for (let index = 0; index < totalPages; index++) {
const getPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
const { width, height } = getPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
setPdfLoad(true);
};
//function for change page numver of pdf
function changePage(offset) {
@@ -1197,7 +1192,7 @@ function SignYourSelf() {
/>
)}
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail && !checkTourStatus && (
{pdfLoad && !checkTourStatus && (
<Tour
onRequestClose={closeTour}
steps={tourConfig}
@@ -1361,8 +1356,8 @@ function SignYourSelf() {
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
pdfLoad={pdfLoad}
setPdfLoad={setPdfLoad}
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
@@ -1375,8 +1370,6 @@ function SignYourSelf() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
setValidateAlert={setValidateAlert}
handleTextSettingModal={handleTextSettingModal}
pdfRenderHeight={pdfRenderHeight}
setPdfRenderHeight={setPdfRenderHeight}
setScale={setScale}
scale={scale}
/>
+8 -15
View File
@@ -87,12 +87,8 @@ const TemplatePlaceholder = () => {
const [blockColor, setBlockColor] = useState("");
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const [pdfRenderHeight, setPdfRenderHeight] = useState();
const [isTextSetting, setIsTextSetting] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [pdfLoad, setPdfLoad] = useState(false);
const color = [
"#93a3db",
"#e6c3db",
@@ -541,16 +537,15 @@ const TemplatePlaceholder = () => {
//function for get pdf page details
const pageDetails = async (pdf) => {
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const totalPages = pdf?.numPages;
for (let index = 0; index < totalPages; index++) {
const getPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
const { width, height } = getPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
setPdfLoad(true);
};
//function for save x and y position and show signature tab on that position
const handleTabDrag = (key) => {
@@ -1516,8 +1511,8 @@ const TemplatePlaceholder = () => {
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setPdfLoad={setPdfLoad}
pdfLoad={pdfLoad}
setSignerPos={setSignerPos}
containerWH={containerWH}
setIsResize={setIsResize}
@@ -1537,8 +1532,6 @@ const TemplatePlaceholder = () => {
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
handleNameModal={setIsNameModal}
setPdfRenderHeight={setPdfRenderHeight}
pdfRenderHeight={pdfRenderHeight}
handleTextSettingModal={handleTextSettingModal}
pdfOriginalWH={pdfOriginalWH}
setScale={setScale}