From fbea98bbe6f5eef89c99e4ca5f4b4c0c9a8f1493 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 20 Aug 2024 20:41:14 +0530 Subject: [PATCH] fix: add validation of rotation functionality, add rotation functionality for mobile view --- .../public/locales/en/translation.json | 3 +- .../public/locales/fr/translation.json | 3 +- apps/OpenSign/src/components/RotateAlert.js | 40 +++ apps/OpenSign/src/components/pdf/PdfHeader.js | 59 +++- apps/OpenSign/src/components/pdf/PdfZoom.js | 38 +-- apps/OpenSign/src/components/pdf/RenderPdf.js | 294 +++++++++--------- apps/OpenSign/src/constant/Utils.js | 49 +++ apps/OpenSign/src/pages/PdfRequestFiles.js | 33 +- apps/OpenSign/src/pages/PlaceHolderSign.js | 64 +++- apps/OpenSign/src/pages/SignyourselfPdf.js | 81 +++-- .../OpenSign/src/pages/TemplatePlaceholder.js | 57 +++- .../src/script/locales/en/translation.json | 3 +- .../src/script/locales/fr/translation.json | 3 +- 13 files changed, 483 insertions(+), 244 deletions(-) create mode 100644 apps/OpenSign/src/components/RotateAlert.js diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 8330a6a04..88f4de9de 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -606,5 +606,6 @@ "format": "format", "select-date-format": "Select a date format", "rotate-right":"Rotate right", - "rotate-left":"Rotate left" + "rotate-left":"Rotate left", + "rotate-alert-mssg":"All widgets on this page will be lost. Are you sure you want to proceed?" } diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 7114790d4..14eb96d39 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -605,5 +605,6 @@ "format": "format", "select-date-format": "Sélectionnez un format de date", "rotate-right" :"Faire pivoter à droite", - "rotate-left" :"Faire pivoter à gauche" + "rotate-left" :"Faire pivoter à gauche", + "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?" } diff --git a/apps/OpenSign/src/components/RotateAlert.js b/apps/OpenSign/src/components/RotateAlert.js new file mode 100644 index 000000000..ee5ed23c9 --- /dev/null +++ b/apps/OpenSign/src/components/RotateAlert.js @@ -0,0 +1,40 @@ +import React from "react"; +import ModalUi from "../primitives/ModalUi"; +import { useTranslation } from "react-i18next"; + +function RotateAlert(props) { + const { t } = useTranslation(); + return ( + { + props.setIsRotate(false); + }} + > +
+

{t("rotate-alert-mssg")}

+ +
+
+ + +
+
+ + ); +} + +export default RotateAlert; diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js index f4976d4f2..f92b99888 100644 --- a/apps/OpenSign/src/components/pdf/PdfHeader.js +++ b/apps/OpenSign/src/components/pdf/PdfHeader.js @@ -34,7 +34,11 @@ function Header({ setIsEmail, completeBtnTitle, setIsEditTemplate, - isPublicTemplate + isPublicTemplate, + clickOnZoomIn, + clickOnZoomOut, + handleRotationFun, + isDisableRotate }) { const { t } = useTranslation(); const filterPrefill = @@ -73,7 +77,7 @@ function Header({ allPages={allPages} changePage={changePage} /> - {pdfUrl && alreadySign ? ( + {isCompleted && alreadySign ? (
@@ -185,11 +189,7 @@ function Header({
{ - if (!pdfUrl) { - embedWidgetsData(); - } else if (isPdfRequestFiles) { - embedWidgetsData(); - } + embedWidgetsData(); }} className="border-none font-[650] text-[14px] op-link op-link-primary no-underline" > @@ -207,7 +207,7 @@ function Header({ handleDownloadPdf( pdfDetails, - pdfUrl, + pdfDetails[0]?.URL, setIsDownloading ) } @@ -226,6 +226,43 @@ function Header({ > {t("download")} + {!isDisableRotate && ( + <> + handleRotationFun(90)} + > + + + {t("rotate-right")} + + + handleRotationFun(-90)} + > + + + {t("rotate-left")} + + + + )} + + clickOnZoomIn()} + > + + {t("zoom-in")} + + clickOnZoomOut()} + > + + {t("zoom-out")} + @@ -443,9 +480,7 @@ function Header({ type="button" className="op-btn op-btn-primary op-btn-sm mr-[3px]" onClick={() => { - if (!pdfUrl) { - embedWidgetsData(); - } + embedWidgetsData(); }} > {t("finish")} diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 010c8db6c..7afa83330 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -1,40 +1,14 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { rotatePdfPage } from "../../constant/Utils"; function PdfZoom(props) { const { t } = useTranslation(); - const onClickZoomIn = () => { - props.setScale(props.scale + 0.1 * props.scale); - props.setZoomPercent(props.zoomPercent + 10); - }; - const onClickZoomOut = () => { - if (props.zoomPercent > 0) { - if (props.zoomPercent === 10) { - props.setScale(1); - } else { - props.setScale(props.scale - 0.1 * props.scale); - } - props.setZoomPercent(props.zoomPercent - 10); - } - }; - //`handleRotationFun` function is used to roatate pdf particular page - const handleRotationFun = async (rotateDegree) => { - const urlDetails = await rotatePdfPage( - props.file, - rotateDegree, - props.pageNumber - 1, - props.pdfRotateBase64 - ); - props?.setPdfArrayBuffer && - props?.setPdfArrayBuffer(urlDetails.arrayBuffer); - props.setPdfRotatese64(urlDetails.base64); - }; + return ( props.clickOnZoomIn()} title={t("zoom-in")} > @@ -43,7 +17,9 @@ function PdfZoom(props) { <> handleRotationFun(90)} + onClick={() => { + props.handleRotationFun(90); + }} title={t("rotate-right")} > @@ -51,7 +27,7 @@ function PdfZoom(props) { handleRotationFun(-90)} + onClick={() => props.handleRotationFun(-90)} > @@ -59,7 +35,7 @@ function PdfZoom(props) { )} props.clickOnZoomOut()} style={{ cursor: props.zoomPercent > 0 ? "pointer" : "default" }} diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index 1195925e7..4fc3b6024 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -70,6 +70,7 @@ function RenderPdf({ }) { const { t } = useTranslation(); 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"); @@ -261,153 +262,167 @@ function RenderPdf({ {t("success-email-alert")} )} {isMobile ? ( -
- {containerWH?.width && - pdfOriginalWH.length > 0 && - (pdfRequest - ? signerPos.map((data, key) => { - return ( - - {checkSignedSigners(data)} - - ); - }) - : placeholder // placeholder mobile - ? signerPos.map((data, ind) => { +
+ {containerWH?.width && + pdfOriginalWH.length > 0 && + (pdfRequest + ? signerPos.map((data, key) => { return ( - - {data.placeHolder.map((placeData, index) => { - return ( - - {placeData.pageNumber === pageNumber && - placeData.pos.map((pos) => { - return ( - - - - ); - })} - - ); - })} + + {checkSignedSigners(data)} ); }) - : xyPostion.map((data, ind) => { - return ( - - {data.pageNumber === pageNumber && - data.pos.map((pos) => { + : placeholder // placeholder mobile + ? signerPos.map((data, ind) => { + return ( + + {data.placeHolder.map((placeData, index) => { return ( - pos && ( - - ) + + {placeData.pageNumber === pageNumber && + placeData.pos.map((pos) => { + return ( + + + + ); + })} + ); })} - - ); - }))} + + ); + }) + : xyPostion.map((data, ind) => { + return ( + + {data.pageNumber === pageNumber && + data.pos.map((pos) => { + return ( + pos && ( + + ) + ); + })} + + ); + }))} - {/* this component for render pdf document is in middle of the component */} -
{ setPdfLoad(false); @@ -427,6 +442,7 @@ function RenderPdf({ } >
-
+ ) : ( { const pdfUrl = pdfData.url(); return pdfUrl; }; +export const onClickZoomIn = (scale, zoomPercent, setScale, setZoomPercent) => { + setScale(scale + 0.1 * scale); + setZoomPercent(zoomPercent + 10); +}; +export const onClickZoomOut = ( + zoomPercent, + scale, + setZoomPercent, + setScale +) => { + if (zoomPercent > 0) { + if (zoomPercent === 10) { + setScale(1); + } else { + setScale(scale - 0.1 * scale); + } + setZoomPercent(zoomPercent - 10); + } +}; + +//function to use remove widgets from current page when user want to rotate page +export const handleRemoveWidgets = ( + setSignerPos, + signerPos, + pageNumber, + setIsRotate +) => { + const updatedSignerPos = signerPos.map((placeholderObj) => { + return { + ...placeholderObj, + placeHolder: placeholderObj?.placeHolder?.filter( + (data) => data?.pageNumber !== pageNumber + ) + }; + }); + setSignerPos(updatedSignerPos); + setIsRotate(false); +}; +//function to show warning when user rotate page and there are some already widgets on that page +export const handleRotateWarning = (signerPos, pageNumber) => { + const placeholderExist = signerPos?.some((placeholderObj) => + placeholderObj?.placeHolder?.some((data) => data?.pageNumber === pageNumber) + ); + if (placeholderExist) { + return true; + } else { + return false; + } +}; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index a657f2823..efa058bb9 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -32,7 +32,9 @@ import { handleToPrint, handleDownloadCertificate, openInNewTab, - getDefaultSignature + getDefaultSignature, + onClickZoomIn, + onClickZoomOut } from "../constant/Utils"; import LoaderWithMsg from "../primitives/LoaderWithMsg"; import HandleError from "../primitives/HandleError"; @@ -141,17 +143,20 @@ function PdfRequestFiles(props) { let isGuestSignFlow = false; let sendmail; let getDocId = ""; - const route = !props.templateId && window.location.pathname; + const route = !props.templateId && window.location.pathname; //'/load/recipientSignPdf/TOAVuhXbfw/fPAKdK1qgX' + console.log(" window.location?.search", window.location?.search); + + //window.location.search = ?sendmail=false const getQuery = !props.templateId && window.location?.search && - window.location?.search?.split("?"); + window.location?.search?.split("?"); //['','sendmail=false'] + //'sendmail=false' if (getQuery) { - sendmail = getQuery[1].split("=")[1]; + sendmail = getQuery[1].split("=")[1]; //false } - const checkSplit = route && route?.split("/"); - + const checkSplit = route && route?.split("/"); // ['', 'load', 'recipientSignPdf', 'TOAVuhXbfw', 'fPAKdK1qgX'] if (checkSplit && checkSplit.length > 4) { isGuestSignFlow = true; getDocId = checkSplit[3]; @@ -1598,6 +1603,12 @@ function PdfRequestFiles(props) { }); }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; return ( @@ -1921,11 +1932,8 @@ function PdfRequestFiles(props) { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} isDisableRotate={true} /> <div className=" w-full md:w-[95%] "> @@ -2076,6 +2084,9 @@ function PdfRequestFiles(props) { setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} isPublicTemplate={isPublicTemplate} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + isDisableRotate={true} /> <div ref={divRef} data-tut="pdfArea" className="h-[95%]"> diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 813c27cdb..16bc0d4a4 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -36,7 +36,12 @@ import { convertPdfArrayBuffer, getContainerScale, openInNewTab, - convertBase64ToFile + convertBase64ToFile, + onClickZoomIn, + onClickZoomOut, + rotatePdfPage, + handleRemoveWidgets, + handleRotateWarning } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import { useNavigate } from "react-router-dom"; @@ -57,6 +62,7 @@ import PdfZoom from "../components/pdf/PdfZoom"; import LottieWithLoader from "../primitives/DotLottieReact"; import { paidUrl } from "../json/plansArr"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; function PlaceHolderSign() { const { t } = useTranslation(); @@ -134,6 +140,7 @@ function PlaceHolderSign() { const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const [activeMailAdapter, setActiveMailAdapter] = useState(""); + const [isRotate, setIsRotate] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = useState({ status: false, message: "" @@ -1715,6 +1722,31 @@ function PlaceHolderSign() { }); } }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isRotate = handleRotateWarning(signerPos, pageNumber); + if (isRotate) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); + } + }; + const handleRemovePlaceholder = () => { + handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + }; return ( <> <Title title={state?.title ? state.title : "New Document"} /> @@ -1768,19 +1800,9 @@ function PlaceHolderSign() { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className=" w-full md:w-[95%] "> {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -2026,9 +2048,16 @@ function PlaceHolderSign() { alertSendEmail={alertSendEmail} isShowHeader={true} currentSigner={true} + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} /> - <div ref={divRef} data-tut="pdfArea" className="h-[95%]"> + <div + ref={divRef} + data-tut="pdfArea" + className="h-full md:h-[95%]" + > {containerWH && ( <RenderPdf pageNumber={pageNumber} @@ -2217,6 +2246,11 @@ function PlaceHolderSign() { fontColor={fontColor} setFontColor={setFontColor} /> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemovePlaceholder} + /> </DndProvider> </> ); diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 2f9049a80..55acc3e7c 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -34,7 +34,10 @@ import { changeImageWH, handleSendOTP, getContainerScale, - getDefaultSignature + getDefaultSignature, + onClickZoomIn, + onClickZoomOut, + rotatePdfPage } from "../constant/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -53,6 +56,7 @@ import VerifyEmail from "../components/pdf/VerifyEmail"; import PdfZoom from "../components/pdf/PdfZoom"; import Loader from "../primitives/Loader"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { const { t } = useTranslation(); @@ -124,6 +128,7 @@ function SignYourSelf() { const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); const [pdfRotateBase64, setPdfRotatese64] = useState(""); + const [isRotate, setIsRotate] = useState(false); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -207,6 +212,7 @@ function SignYourSelf() { return () => clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps }, [divRef.current, isHeader]); + //function for get document details for perticular signer with signer'object id const getDocumentDetails = async (showComplete) => { try { @@ -1162,6 +1168,48 @@ function SignYourSelf() { handleTextSettingModal(false); } }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isPlaceholder = handleRotateWarning(); + if (isPlaceholder) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfUrl || pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); + } + }; + + //function to show warning when user rotate page and there are some already widgets on that page + const handleRotateWarning = () => { + const placeholderData = xyPostion?.filter( + (data) => data.pageNumber === pageNumber + ); + if (placeholderData && placeholderData.length > 0) { + return true; + } else { + return false; + } + }; + //function to use remove widgets from current page when user want to rotate page + const handleRemoveWidgets = () => { + const updatePlaceholder = xyPostion.filter( + (data) => data.pageNumber !== pageNumber + ); + setXyPostion(updatePlaceholder); + setIsRotate(false); + }; return ( <DndProvider backend={HTML5Backend}> <Title title={"Self Sign"} /> @@ -1225,19 +1273,9 @@ function SignYourSelf() { /> <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className="w-full md:w-[95%]"> <ModalUi @@ -1345,12 +1383,12 @@ function SignYourSelf() { isSignYourself={true} setIsEmail={setIsEmail} isCompleted={isCompleted} + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + widgetsDetails={xyPostion} /> - <div - ref={divRef} - data-tut="reactourSecond" - className="h-full md:h-[95%]" - > + <div ref={divRef} data-tut="reactourSecond" className="h-full"> {containerWH?.width && containerWH?.height && ( <RenderPdf pageNumber={pageNumber} @@ -1450,6 +1488,11 @@ function SignYourSelf() { </button> </div> </ModalUi> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemoveWidgets} + /> <TextFontSetting isTextSetting={isTextSetting} setIsTextSetting={setIsTextSetting} diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 44d7fab27..6754690f5 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -27,7 +27,12 @@ import { fetchSubscription, getContainerScale, openInNewTab, - convertBase64ToFile + convertBase64ToFile, + rotatePdfPage, + onClickZoomOut, + onClickZoomIn, + handleRemoveWidgets, + handleRotateWarning } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -44,6 +49,7 @@ import { useSelector } from "react-redux"; import PdfZoom from "../components/pdf/PdfZoom"; import { paidUrl } from "../json/plansArr"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; const TemplatePlaceholder = () => { const { t } = useTranslation(); const navigate = useNavigate(); @@ -64,6 +70,7 @@ const TemplatePlaceholder = () => { const [isSendAlert, setIsSendAlert] = useState(false); const [isCreateDocModal, setIsCreateDocModal] = useState(false); const [isSubscribe, setIsSubscribe] = useState(false); + const [isRotate, setIsRotate] = useState(false); const [isLoading, setIsLoading] = useState({ isLoad: true, message: t("loading-mssg") @@ -1317,6 +1324,31 @@ const TemplatePlaceholder = () => { setIsCheckbox(false); }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isRotate = handleRotateWarning(signerPos, pageNumber); + if (isRotate) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfRotatese64(urlDetails.base64); + } + }; + const handleRemovePlaceholder = () => { + handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + }; + return ( <> <Title title={"Template"} /> @@ -1364,18 +1396,9 @@ const TemplatePlaceholder = () => { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className="w-full md:w-[95%]"> {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -1518,6 +1541,9 @@ const TemplatePlaceholder = () => { currentSigner={true} setIsEditTemplate={handleEditTemplateModal} dataTut4="reactourFour" + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} /> <div ref={divRef} @@ -1707,6 +1733,11 @@ const TemplatePlaceholder = () => { fontColor={fontColor} setFontColor={setFontColor} /> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemovePlaceholder} + /> </DndProvider> </> ); diff --git a/apps/OpenSign/src/script/locales/en/translation.json b/apps/OpenSign/src/script/locales/en/translation.json index 90fde4716..461c4615c 100644 --- a/apps/OpenSign/src/script/locales/en/translation.json +++ b/apps/OpenSign/src/script/locales/en/translation.json @@ -606,5 +606,6 @@ "format": "format", "select-date-format": "Select a date format", "rotate-right": "Rotate right", - "rotate-left": "Rotate left" + "rotate-left": "Rotate left", + "rotate-alert-mssg": "All widgets on this page will be lost. Are you sure you want to proceed?" } diff --git a/apps/OpenSign/src/script/locales/fr/translation.json b/apps/OpenSign/src/script/locales/fr/translation.json index bc8daf3ed..1b1671b85 100644 --- a/apps/OpenSign/src/script/locales/fr/translation.json +++ b/apps/OpenSign/src/script/locales/fr/translation.json @@ -605,5 +605,6 @@ "format": "format", "select-date-format": "Sélectionnez un format de date", "rotate-right": "Faire pivoter à droite", - "rotate-left": "Faire pivoter à gauche" + "rotate-left": "Faire pivoter à gauche", + "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?" }