diff --git a/src/App.tsx b/src/App.tsx index 045023e..0486a18 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -94,7 +94,8 @@ const App = () => { {/* Links work wothout Login */} } /> } /> - } /> + } /> + } /> } /> {/* Links work wothout Login */} diff --git a/src/assets/record.svg b/src/assets/record.svg new file mode 100644 index 0000000..3d51d45 --- /dev/null +++ b/src/assets/record.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx index 4784589..d3952de 100644 --- a/src/components/accounts/TransactionDataTable.tsx +++ b/src/components/accounts/TransactionDataTable.tsx @@ -3,7 +3,6 @@ import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi'; import api from '../../config/api'; import { Transaction } from '../transactions/Transactions'; import { useNavigate } from 'react-router-dom'; - import { FaCheck } from 'react-icons/fa'; diff --git a/src/components/client/SignCompletionScreen.tsx b/src/components/client/SignCompletionScreen.tsx new file mode 100644 index 0000000..e4c9f5d --- /dev/null +++ b/src/components/client/SignCompletionScreen.tsx @@ -0,0 +1,380 @@ +import React, { useState, useEffect } from 'react'; +import { + FiDownload, + FiCheckCircle, + FiZap, + FiShield, + FiClock, + FiFileText, + FiX, +} from 'react-icons/fi'; +import { IoMdArrowRoundBack } from 'react-icons/io'; +import { useParams } from 'react-router-dom'; +import { SignTypeEnum } from '../../utlity/types'; + +const SignCompletionScreen: React.FC = () => { + const { signType } = useParams(); + const [showDownloadModal, setShowDownloadModal] = useState(false); + const [animationPhase, setAnimationPhase] = useState(0); + + useEffect(() => { + // Trigger animation phases sequentially + const timers = [ + setTimeout(() => setAnimationPhase(1), 200), + setTimeout(() => setAnimationPhase(2), 800), + setTimeout(() => setAnimationPhase(3), 1400), + setTimeout(() => setAnimationPhase(4), 2000), + ]; + + return () => timers.forEach(clearTimeout); + }, []); + + const handleDownload = (format: string) => { + console.log(`Downloading document in ${format} format`); + const content = `Signed document - ${new Date().toISOString()}`; + const blob = new Blob([content], { type: 'text/plain' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `signed-document.${format.toLowerCase()}`; + a.click(); + URL.revokeObjectURL(url); + }; + + return ( +
+ + + {/* Floating Particles Background */} +
+
+
+
+
+
+
+
+ + {/* Main Completion Screen */} +
+
+ + {/* Success Icon */} +
+
+ +
+ + +
+ + {/* Main Success Message */} +
= 1 ? 'fade-in-up' : ''}`}> +

+ Signature Complete! +

+

+ Your document has been successfully signed. +

+
+ + {/* Action Buttons */} +
+ + {signType === SignTypeEnum.selfSign ? + {/* */} + + Back Sign Made Easy + {/* */} + : + + {/* */} + + Visit Sign Made Easy + {/* */} + + } +
+ + {/* Additional Info */} +
+

+ Your document is signed and ready. You can download it or return to the sign made easy. +

+
+
+
+ + {/* Premium Download Modal */} + {/* {showDownloadModal && ( +
+
+ + +
+
+ +
+

Choose Download Format

+

Select your preferred file format

+
+ +
+ + + +
+ +
+

+ Files are automatically encrypted and timestamped +

+
+
+
+ )} */} +
+ ); +}; + +export default SignCompletionScreen; \ No newline at end of file diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 076c84c..ce5e317 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import axios from "axios" import { RootState } from "../../store/store"; -import { useParams } from "react-router-dom" +import { useNavigate, useParams } from "react-router-dom" import { DroppedItem, DroppedItemsObj, TagsTypes } from "../../utlity/types"; import Loader from "../dashboard/Loader"; @@ -24,6 +24,7 @@ import DocumentPages from "./DocumentPages"; import FieldList from "../process/processStepTwo/FieldList"; import typeToIconMap from "../../helper/iconMap"; import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer"; +import SignCompletionScreen from "./SignCompletionScreen"; @@ -173,6 +174,7 @@ const SignDocument = () => { const [transparentTags, setTransparentTags] = useState(false); const [provideTags, setProvideTags] = useState(false) + const [showCompletionScreen, setShowCompletionScreen] = useState(false) const [saved, setSaved] = useState({ saveType: null, @@ -181,6 +183,7 @@ const SignDocument = () => { initial: null, }); + const navigate = useNavigate(); const [signConfObj, setSignConfObj] = useState({}); @@ -314,6 +317,10 @@ const SignDocument = () => { setProvideTags(true) } + if (res.data.status ==="COMPLETED" ) { + setShowCompletionScreen(true) + } + setTimeout(() => { dispatch(hideLoader()); }, 600); @@ -466,7 +473,10 @@ const SignDocument = () => { theme: "light", transition: Bounce, }); + // Completion Sign Screen Modal and download file + setShowCompletionScreen(true) }, 800) + } }) .catch((err) => { @@ -766,7 +776,7 @@ const SignDocument = () => {
<> {/* */} - + {showCompletionScreen && }
) => handleFormSubmit(e)} > @@ -1329,6 +1339,9 @@ const SignDocument = () => {
+ + + {/* */} diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index f835612..655e92e 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -5,6 +5,7 @@ import ContactFormModal, { ContactData } from './ContactsFormModal'; import { Bounce, toast } from 'react-toastify'; import { IoMdAdd } from 'react-icons/io'; import LoaderUi from '../../helper/LoaderUi'; +import logoRecord from '../../assets/record.svg' type ContactSchema = [{ id: number, @@ -121,7 +122,10 @@ const Contacts = () => {
setShowModal((prev) => !prev)} + onClick={() => { + setShowModal((prev) => !prev); + setActionStatus("Add") + }} className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm hover:opacity-90 "> {openMenuId === contact.id && ( -
+