diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index ea6fa89f4..4c562e065 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -51,6 +51,7 @@ import LoaderWithMsg from "../primitives/LoaderWithMsg"; import DownloadPdfZip from "../primitives/DownloadPdfZip"; import Loader from "../primitives/Loader"; import PdfDeclineModal from "../primitives/PdfDeclineModal"; +import Agreement from "../primitives/Agreement"; function PdfRequestFiles(props) { const { t } = useTranslation(); @@ -137,6 +138,8 @@ function PdfRequestFiles(props) { const isHeader = useSelector((state) => state.showHeader); const divRef = useRef(null); const [isDownloadModal, setIsDownloadModal] = useState(false); + const [isAgree, setIsAgree] = useState(false); + const [isAgreeTour, setIsAgreeTour] = useState(false); const isMobile = window.innerWidth < 767; @@ -1672,6 +1675,17 @@ function PdfRequestFiles(props) { ); }; + const AgreementTour = [ + { + selector: '[data-tut="IsAgree"]', + content: "Please agree & continue to start signing", + position: "top", + style: { fontSize: "13px" } + } + ]; + const handleCloseAgreeTour = () => { + setIsAgreeTour(false); + }; return ( @@ -1694,7 +1708,23 @@ function PdfRequestFiles(props) { ) : handleError ? ( <HandleError handleError={handleError} /> ) : ( - <div> + <div onClick={() => !isAgree && setIsAgreeTour(true)}> + {!isAgree && ( + <Agreement + setIsAgree={setIsAgree} + setIsAgreeTour={setIsAgreeTour} + /> + )} + <Tour + showNumber={false} + showNavigation={false} + showNavigationNumber={false} + onRequestClose={handleCloseAgreeTour} + steps={AgreementTour} + isOpen={isAgreeTour} + rounded={5} + closeWithMask={false} + /> {isUiLoading && ( <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80"> <Loader /> @@ -1713,6 +1743,7 @@ function PdfRequestFiles(props) { /> </div> )} + <div style={{ pointerEvents: diff --git a/apps/OpenSign/src/primitives/Agreement.js b/apps/OpenSign/src/primitives/Agreement.js new file mode 100644 index 000000000..ae0cf6465 --- /dev/null +++ b/apps/OpenSign/src/primitives/Agreement.js @@ -0,0 +1,43 @@ +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; + +function Agreement(props) { + const { t } = useTranslation(); + const [isChecked, setIsChecked] = useState(false); + return ( + <div className="flex justify-between mx-2 mb-2 pt-1" data-tut="IsAgree"> + <div className="flex items-center"> + <input + className="mr-3 op-checkbox op-checkbox-m" + type="checkbox" + value={isChecked} + onChange={(e) => { + setIsChecked(e.target.checked); + if (e.target.checked) { + props.setIsAgreeTour(false); + } + }} + /> + I confirm that I have read and understood the 'Electronic Record + and Signature Disclosure' and consent to use electronic records and + signatures. + </div> + + <div className="flex"> + <button + onClick={() => { + if (isChecked) { + props.setIsAgreeTour(false); + props.setIsAgree(true); + } + }} + className="op-btn op-btn-primary op-btn-sm" + > + Agree & Continue + </button> + </div> + </div> + ); +} + +export default Agreement;