91 lines
4.0 KiB
TypeScript
91 lines
4.0 KiB
TypeScript
import React, { useEffect, useRef } from 'react'
|
|
import { IoMdArrowDropdown } from "react-icons/io";
|
|
import { IoIosSend } from "react-icons/io";
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { setSignType } from '../../store/slices/selectedDocsSlice';
|
|
import { RootState } from '../../store/store';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Bounce, toast } from 'react-toastify';
|
|
// import { IoMdArrowDropright } from "react-icons/io";
|
|
|
|
interface Props {
|
|
showSideBar: boolean;
|
|
}
|
|
|
|
const SendForSign: React.FC<Props> = ({ showSideBar }) => {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const [sendForSignDropdown, setSendForSignDropdown] = React.useState(false);
|
|
const dropDownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
sendForSignDropdown && dropDownRef.current?.focus();
|
|
}, [sendForSignDropdown])
|
|
|
|
const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments);
|
|
|
|
const handleSendSignDispatch: (type: "self-sign" | "multiple-sign") => void = (signType) => {
|
|
if (selectedDocuments === null || !selectedDocuments.length) {
|
|
if (selectedDocuments === null || !selectedDocuments.length) {
|
|
toast.dismiss();
|
|
toast.error("Select 📄 Documents first!", {
|
|
position: "bottom-right",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: false,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
theme: "light",
|
|
transition: Bounce,
|
|
});
|
|
return
|
|
}
|
|
}
|
|
|
|
if (selectedDocuments.length) {
|
|
dispatch(setSignType(signType));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='relative max-h-max pb-3'
|
|
tabIndex={0}
|
|
ref={dropDownRef}
|
|
onBlur={() => setSendForSignDropdown(false)}
|
|
>
|
|
<div className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--primary)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}
|
|
onClick={() => setSendForSignDropdown(!sendForSignDropdown)}>
|
|
<div className={`w-full`}>
|
|
{
|
|
showSideBar ?
|
|
<p className='text-center text-sm'>Send for signature</p>
|
|
:
|
|
<IoIosSend className={`pl-2 text-3xl`} />
|
|
}
|
|
</div>
|
|
{showSideBar && <p className='border-l-1 border-[var(--sendForSignTextCol)] px-2 py-2'>
|
|
<IoMdArrowDropdown className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
|
|
</p>}
|
|
</div>
|
|
|
|
{/* Drop Down Box */}
|
|
{
|
|
sendForSignDropdown &&
|
|
<div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
|
|
<div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('self-sign')}>
|
|
<p>Self Sign</p>
|
|
<p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
|
|
</div>
|
|
<div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
|
|
<div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleSendSignDispatch('multiple-sign')}>
|
|
<p>Send for Sign</p>
|
|
<p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SendForSign |