118 lines
5.3 KiB
TypeScript
118 lines
5.3 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, SignType } from '../../store/slices/selectedDocsSlice';
|
|
import { RootState } from '../../store/store';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Bounce, toast } from 'react-toastify';
|
|
import api from '../../config/api';
|
|
import { StartCard } from '../home/StartSection';
|
|
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
|
|
import { SignTypeEnum } from '../../utlity/types';
|
|
// 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 user = useSelector((state: RootState) => state.user);
|
|
if (!user.account || user.account === null) {
|
|
window.location.href = "/login";
|
|
return;
|
|
}
|
|
|
|
const defaultAccountId = user.account.id;
|
|
|
|
const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments);
|
|
|
|
const handleStartSectionClick = (signType: SignTypeEnum) => {
|
|
|
|
api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
|
.then(res => {
|
|
if (res.status === 200 || res.status === 201) {
|
|
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
|
dispatch(setTransactionId(res.data));
|
|
let navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}`;
|
|
if (signType === SignTypeEnum.selfSign) navigateUrl = `/process-step-one/${defaultAccountId}/${res.data}/self_sign`;
|
|
setTimeout(() => navigate(navigateUrl), 0)
|
|
}
|
|
})
|
|
.catch(err => console.log(err))
|
|
}
|
|
|
|
// 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={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
|
|
<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={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
|
|
<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 |