App Navigation Update
This commit is contained in:
parent
f6e0b3b8af
commit
6efe737e50
|
|
@ -137,7 +137,7 @@ function Dashboard() {
|
|||
{/* Close Icon */}
|
||||
<button
|
||||
onClick={() => setShowConfetti(false)} // or whatever logic hides the modal
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-gray-100"
|
||||
aria-label="Close"
|
||||
>
|
||||
<IoClose className="text-2xl" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
const CloseConfirmationModal: React.FC<{ open: boolean, onClose: () => void, onConfirm: () => void }> = ({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}) => {
|
||||
|
||||
if (!open) return <></>;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-100 flex items-center justify-center">
|
||||
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative z-10 w-full max-w-sm rounded-sm bg-white p-6 shadow-2xl">
|
||||
|
||||
<h2 className="text-lg font-semibold text-slate-800">
|
||||
Leave this page?
|
||||
</h2>
|
||||
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
Your progress may not be saved.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-sm border border-slate-300 px-4 py-2 hover:bg-slate-100 cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="rounded-sm bg-[var(--primary)] px-4 py-2 text-white cursor-pointer"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CloseConfirmationModal;
|
||||
|
|
@ -3,10 +3,10 @@ import React, { useEffect, useState } from 'react'
|
|||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { RootState } from '../../../store/store'
|
||||
|
||||
import { FaCheck, FaPaste, FaRegCopy, FaSave, FaSignature } from 'react-icons/fa'
|
||||
import { IoIosDocument } from 'react-icons/io'
|
||||
import { FaAngleRight, FaCheck, FaChevronRight, FaPaste, FaRegCopy, FaSave, FaSignature } from 'react-icons/fa'
|
||||
import { IoIosDocument, IoMdArrowRoundBack, IoMdHome } from 'react-icons/io'
|
||||
import { LuRedo2, LuTableOfContents, LuUndo2 } from 'react-icons/lu'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { MdKeyboardArrowDown, MdOutlineKeyboardBackspace } from 'react-icons/md'
|
||||
import { RiResetRightLine } from 'react-icons/ri'
|
||||
import { fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice'
|
||||
|
|
@ -15,9 +15,11 @@ import { Bounce, toast } from 'react-toastify'
|
|||
import { FiChevronDown } from 'react-icons/fi'
|
||||
import RecipientsCon from '../processStepOne/RecipientsCon'
|
||||
import MessageCon from '../processStepOne/MessageCon'
|
||||
import { IoCopy } from 'react-icons/io5'
|
||||
import { IoArrowBackSharp, IoCopy } from 'react-icons/io5'
|
||||
import { FaRegPaste } from 'react-icons/fa6'
|
||||
import ConfirmSendModal from './TransactionSendConfirmationModal'
|
||||
import { RxDividerVertical } from 'react-icons/rx'
|
||||
import CloseConfirmationModal from './CloseCofirmationModal'
|
||||
|
||||
interface NavTwoProps {
|
||||
transactionSaving?: boolean;
|
||||
|
|
@ -108,6 +110,8 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
// const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
|
||||
const [dotCount, setDotCount] = useState(0);
|
||||
|
||||
const [closePage, setClosePage] = useState(false);
|
||||
|
||||
const [isFitDd, setIsFitDd] = useState<boolean>(false)
|
||||
const [selFitIndx, setSelFitIndx] = useState<number>(0);
|
||||
const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 });
|
||||
|
|
@ -240,6 +244,12 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
{closePage && <CloseConfirmationModal
|
||||
open={closePage}
|
||||
onClose={() => setClosePage(false)} // Cancel not closing
|
||||
onConfirm={() => navigate("/")}
|
||||
/>}
|
||||
|
||||
<ConfirmSendModal
|
||||
confirmSendModalOpen={confirmSendModalOpen.open}
|
||||
confirmSendModalOnClose={() => { setConfirmSendModalOpen({ open: false, confirm: false, loading: false }) }}
|
||||
|
|
@ -261,11 +271,36 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
</div> */}
|
||||
|
||||
|
||||
{/* <div>
|
||||
<Link to={"/"}>
|
||||
<img width={120} src="/sme-colored.png" alt="Sign Made Easy" />
|
||||
</Link>
|
||||
</div> */}
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='flex gap-4 text-xl text-slate-600'>
|
||||
<button
|
||||
className='hover:text-[var(--primary)] durartion-300 cursor-pointer'
|
||||
onClick={() => setClosePage(true)}
|
||||
>
|
||||
<IoMdHome />
|
||||
{/* <img width={120} src="/sme-colored.png" alt="Sign Made Easy" /> */}
|
||||
</button>
|
||||
<button
|
||||
className='hover:text-[var(--primary)] durartion-300 cursor-pointer'
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoArrowBackSharp />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='w-[1px] h-[28px] bg-slate-200'></div>
|
||||
|
||||
|
||||
<div className='flex items-center gap-2 text-xs'>
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className='underline font-thin cursor-pointer'>
|
||||
Set Up Transaction
|
||||
</button>
|
||||
<FaAngleRight className='font-thin' />
|
||||
<p className='font-normal'>Add Fields</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue