Compare commits
6 Commits
a1c93a4a61
...
e8b83910a7
| Author | SHA1 | Date |
|---|---|---|
=bhagwanSingh
|
e8b83910a7 | |
|
=bhagwanSingh
|
566765df51 | |
|
=bhagwanSingh
|
25d878b53d | |
|
=bhagwanSingh
|
645bf0cb8d | |
|
=bhagwanSingh
|
2e623931e7 | |
|
=bhagwanSingh
|
8024c76bd3 |
4
.env
4
.env
|
|
@ -1,3 +1,3 @@
|
|||
# VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app"
|
||||
VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app"
|
||||
# VITE_BASE_URI="https://python-amused-adder.ngrok-free.app"
|
||||
VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
|
||||
# VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>Sign Made Easy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -58,15 +58,11 @@ const getInitials = (name: string) => {
|
|||
|
||||
const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
|
||||
|
||||
console.log(signers, "Line 59")
|
||||
|
||||
const grouped = groupByRoutingOrder(signers.signers);
|
||||
const sortedOrders = Object.keys(grouped)
|
||||
.map(Number)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
console.log("sortedOrders",sortedOrders,grouped)
|
||||
|
||||
const currentProcessingOrder =
|
||||
sortedOrders.find((order) =>
|
||||
grouped[order].some((signer) => !signer.completed)
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
}) => {
|
||||
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [accountsOpen, setAccountsOpen] = useState(false);
|
||||
|
|
@ -70,12 +69,10 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
},
|
||||
});
|
||||
|
||||
console.log("user", user)
|
||||
const getAccountDetails = async () => {
|
||||
try {
|
||||
let res = await api.get('/api/user/accounts');
|
||||
let items = res?.data;
|
||||
console.log('items', items);
|
||||
|
||||
const cleanedData: AccountDataArray[] = items.map((item: any) => ({
|
||||
userId: item.userId,
|
||||
|
|
@ -109,7 +106,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
};
|
||||
|
||||
const handleAccountSwitch = (account: any) => {
|
||||
console.log("handleAccountSwitch", account);
|
||||
|
||||
// Update sessionStorage
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
|
||||
|
|
@ -151,7 +147,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
|
||||
const item = res?.data;
|
||||
if (item) {
|
||||
const userData = {
|
||||
|
|
@ -166,8 +162,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
},
|
||||
};
|
||||
|
||||
console.log("userData", userData)
|
||||
|
||||
setUser(userData);
|
||||
sessionStorage.setItem('userDetails', JSON.stringify(userData));
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
|
||||
|
|
@ -175,7 +169,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
|
|||
// Dispatch event for initial load
|
||||
dispatchSessionStorageChange('activeAccountId', userData.account.id);
|
||||
|
||||
console.log("Data is saved in sessionStorage");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
|
|
|
|||
|
|
@ -108,7 +108,6 @@ const Account = () => {
|
|||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
console.log("activeAccountId Trans.", activeAccountId)
|
||||
// const { accountId } = useParams<{ accountId: string }>();
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [accountsData, setAccountsData] = useState([])
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ const dispatchSessionStorageChange = (key: string, newValue: any) => {
|
|||
const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
|
||||
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [accountsOpen, setAccountsOpen] = useState(false);
|
||||
|
|
@ -63,12 +62,10 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
|
|||
},
|
||||
});
|
||||
|
||||
console.log("user", user)
|
||||
const getAccountDetails = async () => {
|
||||
try {
|
||||
let res = await api.get('/api/user/accounts');
|
||||
let items = res?.data;
|
||||
console.log('items', items);
|
||||
|
||||
const cleanedData: AccountDataArray[] = items.map((item: any) => ({
|
||||
userId: item.userId,
|
||||
|
|
@ -102,7 +99,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
|
|||
};
|
||||
|
||||
const handleAccountSwitch = (account: any) => {
|
||||
console.log("handleAccountSwitch", account);
|
||||
|
||||
// Update sessionStorage
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
|
||||
|
|
@ -146,7 +142,7 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
|
|||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
|
||||
const item = res?.data;
|
||||
if (item) {
|
||||
const userData = {
|
||||
|
|
@ -161,16 +157,12 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
|
|||
},
|
||||
};
|
||||
|
||||
console.log("userData",userData)
|
||||
|
||||
setUser(userData);
|
||||
sessionStorage.setItem('userDetails', JSON.stringify(userData));
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
|
||||
|
||||
// Dispatch event for initial load
|
||||
dispatchSessionStorageChange('activeAccountId', userData.account.id);
|
||||
|
||||
console.log("Data is saved in sessionStorage");
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,6 @@ const Accounts = () => {
|
|||
const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
|
||||
try {
|
||||
let response = await api.post(`/api/accounts/${accountId}/accept/invite`)
|
||||
console.log(response)
|
||||
if (response.data.status === 202) {
|
||||
toast.success("Login Successful", {
|
||||
position: "top-center",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const statusColorMap = {
|
|||
const TransactionDataTable = ({activeAccountId}) => {
|
||||
const navigate = useNavigate()
|
||||
const loaction = useLocation()
|
||||
console.log("loaction", loaction.pathname);
|
||||
|
||||
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
|
||||
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { Link, useNavigate } from "react-router-dom";
|
|||
import OAuthGoogle from "./OAuthGoogle";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
// import Cookies from "js-cookie";
|
||||
import { updateUser } from "../../store/slices/userSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "../../store/store";
|
||||
// import api from "../../config/api";
|
||||
|
|
@ -27,18 +26,15 @@ function LoginForm() {
|
|||
|
||||
|
||||
const handleNextClick = () => {
|
||||
console.log('Next Button Clicked');
|
||||
|
||||
// Validation Starts
|
||||
if (formData.email === "") {
|
||||
console.log('All Fields are Required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
// Validation Ends
|
||||
|
|
@ -47,18 +43,14 @@ function LoginForm() {
|
|||
axios.get(`${import.meta.env.VITE_BASE_URI}/api/auth/user?email=${formData.email}`, { headers: { "ngrok-skip-browser-warning": "69420" } })
|
||||
.then((res) => {
|
||||
|
||||
console.log(res, "Cache Key res", formData.email)
|
||||
console.log(res.data, "Cache Key res 2", formData.email)
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.dismiss();
|
||||
console.log('User Exists');
|
||||
setCacheKey(res.data);
|
||||
setNextClick(true);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('User Does Not Exists');
|
||||
toast.dismiss();
|
||||
toast.error("User Does Not Exists", {
|
||||
position: "top-center",
|
||||
|
|
@ -76,25 +68,20 @@ function LoginForm() {
|
|||
}
|
||||
|
||||
const handleFormLoginClick = () => {
|
||||
console.log('Login Function Called Line 7 LoginForm.tsx');
|
||||
|
||||
// Validation Starts
|
||||
if (formData.email === "" || formData.password === "") {
|
||||
console.log('All Fields are Required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
// Validation Ends
|
||||
|
||||
// Login API Call
|
||||
console.log('Login API Call');
|
||||
console.log(formData, "Submitting Data :", { cacheKey: cacheKey, password: formData.password });
|
||||
axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/login`,
|
||||
{ cacheKey: cacheKey, password: formData.password },
|
||||
{
|
||||
|
|
@ -106,11 +93,9 @@ function LoginForm() {
|
|||
}
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
|
||||
if (res.status === 200) {
|
||||
|
||||
toast.dismiss();
|
||||
// console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
|
||||
// Cookies.set("authorization", res.headers.authorization, {
|
||||
// path: "/",
|
||||
// secure: true, // Required for HTTPS
|
||||
|
|
@ -133,9 +118,7 @@ function LoginForm() {
|
|||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, "ERROR")
|
||||
if (err.status === 401) {
|
||||
console.log('Unauthorized');
|
||||
toast.dismiss();
|
||||
toast.error("Credentials Not Match", {
|
||||
position: "top-center",
|
||||
|
|
@ -149,7 +132,6 @@ function LoginForm() {
|
|||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
console.log('Some Error Occurred');
|
||||
toast.dismiss();
|
||||
toast.error("Some Error Occurred", {
|
||||
position: "top-center",
|
||||
|
|
@ -207,7 +189,7 @@ function LoginForm() {
|
|||
<p>or login with social platforms</p>
|
||||
|
||||
<div className="social-icons">
|
||||
<OAuthGoogle />
|
||||
<OAuthGoogle isLogin={true} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -19,16 +19,14 @@ interface OAuthGoogleProps {
|
|||
isLogin: boolean
|
||||
}
|
||||
|
||||
const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
|
||||
const OAuthGoogle: React.FC<OAuthGoogleProps> = ({ isLogin }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Define the success handler type (based on the Google login response)
|
||||
const responseMessage = (response: GoogleResponse) => {
|
||||
console.log(response, "OAuthGoogle .tsx Line 23 Response from Google");
|
||||
const token = response.credential;
|
||||
|
||||
console.log(token, 'token');
|
||||
|
||||
axios.get(`${import.meta.env.VITE_BASE_URI}/api/oauth2/authorization/google?token=${token}`, {
|
||||
headers: {
|
||||
|
|
@ -38,7 +36,6 @@ const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
|
|||
.then((res) => {
|
||||
if (res.status === 200 || res.status === 201) {
|
||||
toast.dismiss();
|
||||
console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
|
||||
|
||||
dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
|
||||
|
||||
|
|
@ -52,8 +49,6 @@ const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
|
|||
|
||||
|
||||
const decoded = jwtDecode(token);
|
||||
|
||||
console.log(decoded, 'decoded');
|
||||
};
|
||||
|
||||
// Define the error handler type (error can be of any type)
|
||||
|
|
|
|||
|
|
@ -22,14 +22,12 @@ interface FormDataState {
|
|||
|
||||
|
||||
function RegisterForm() {
|
||||
console.log("RegisterForm Component Rendered");
|
||||
const [formData, setForm] = useState<FormDataState>({ email: "", password: "", confirmPassword: "", firstName: "", lastName: "" });
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleFormRegisterClick = () => {
|
||||
console.log('Register Function Called Line 7 RegisterForm.tsx');
|
||||
formData.firstName = formData.firstName.trim();
|
||||
formData.lastName = formData.lastName.trim();
|
||||
// Validation Starts
|
||||
|
|
@ -48,7 +46,6 @@ function RegisterForm() {
|
|||
|
||||
|
||||
// Register API Call
|
||||
console.log('Register API Call');
|
||||
console.dir(formData);
|
||||
|
||||
axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/signup`, { firstName: formData.firstName, lastName: formData.lastName, email: formData.email, password: formData.password }, {
|
||||
|
|
@ -59,10 +56,8 @@ function RegisterForm() {
|
|||
}
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.status, "Response Status Line 42 RegisterForm.tsx");
|
||||
if (res.status === 201) {
|
||||
|
||||
console.log(res, "line 58");
|
||||
toast.dismiss();
|
||||
// dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
|
||||
// dispatch(updateUser({ ...res.data, authorized: true }));
|
||||
|
|
@ -71,7 +66,6 @@ function RegisterForm() {
|
|||
})
|
||||
.catch((err) => {
|
||||
if (err.status === 409) {
|
||||
console.log('User Already Exists');
|
||||
toast.dismiss();
|
||||
toast.error("User Already Exists", {
|
||||
position: "top-center",
|
||||
|
|
@ -85,7 +79,6 @@ function RegisterForm() {
|
|||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
console.log('Some Error Occurred');
|
||||
toast.dismiss();
|
||||
toast.error("Some Error Occurred", {
|
||||
position: "top-center",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import React from 'react'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import React, { useState } from 'react'
|
||||
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md';
|
||||
import { DocumentType } from './SignDocument';
|
||||
import { GrFormPrevious } from 'react-icons/gr';
|
||||
|
||||
interface DocumentPagesInterface {
|
||||
selectedDocuments: DocumentType[];
|
||||
selectedDocuments: DocumentType[] | null;
|
||||
setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
|
||||
dropDownTogglePage: string;
|
||||
}
|
||||
|
||||
const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
|
||||
return (
|
||||
<div className='bg-white h-full p-4 overflow-y-auto'>
|
||||
<div className='p-4'>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
||||
|
|
@ -20,13 +25,16 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
|
|||
// onBlur={() => setDropDownTogglePage('')}
|
||||
>
|
||||
<div
|
||||
onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
|
||||
onClick={() => {
|
||||
setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)
|
||||
}
|
||||
}
|
||||
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
||||
{
|
||||
document.pages != undefined && <img
|
||||
key={indx}
|
||||
className='rounded-sm shadow'
|
||||
src={document.pages[0].src}
|
||||
src={"data:image/png;base64," + document.thumbnail}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
|
|
@ -40,15 +48,53 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
|
|||
|
||||
{
|
||||
dropDownTogglePage === 'pageDropDown' + indx &&
|
||||
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
|
||||
{document.pages != undefined && document.pages.map((img, indx) => (
|
||||
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
||||
{/* Prev Button */}
|
||||
<a
|
||||
href={"#" + document.documentId + indx}
|
||||
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
|
||||
href={"#" + document.documentId + (currentPage - 1)}
|
||||
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage === 0) e.preventDefault();
|
||||
else setCurrentPage(currentPage - 1);
|
||||
}}
|
||||
>
|
||||
<p className='text-center text-xs text-slate-600'>{indx + 1}</p>
|
||||
<GrFormPrevious />
|
||||
</a>
|
||||
|
||||
{/* Page Selector */}
|
||||
<select
|
||||
className="w-[58px] py-1 text-xs text-slate-400 outline-none"
|
||||
value={currentPage}
|
||||
onChange={(e) => {
|
||||
const newPage = Number(e.target.value);
|
||||
setCurrentPage(newPage);
|
||||
window.location.hash = document.documentId + "" + newPage;
|
||||
}}
|
||||
>
|
||||
{document.pages != undefined && document.pages.map((_, pageIndex) => (
|
||||
<option key={pageIndex} value={pageIndex}>
|
||||
{pageIndex + 1}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<span className="text-xs text-slate-600">
|
||||
/ {document.pages?.length}
|
||||
</span>
|
||||
|
||||
{/* Next Button */}
|
||||
<a
|
||||
href={"#" + document.documentId + (currentPage + 1)}
|
||||
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage === document.pages?.length - 1) e.preventDefault();
|
||||
else setCurrentPage(currentPage + 1);
|
||||
}}
|
||||
>
|
||||
<MdOutlineNavigateNext />
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useEffect, useLayoutEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import axios from "axios"
|
||||
import { RootState } from "../../store/store";
|
||||
import { useNavigate, useParams } from "react-router-dom"
|
||||
import { DroppedItem, DroppedItemsObj, TagsTypes } from "../../utlity/types";
|
||||
import { DroppedItem, TagsTypes } from "../../utlity/types";
|
||||
|
||||
import Loader from "../dashboard/Loader";
|
||||
import SignCon from "../signature/SignCon";
|
||||
|
|
@ -11,24 +11,22 @@ import { Bounce, toast } from "react-toastify";
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
|
||||
|
||||
import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa'
|
||||
import { FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa'
|
||||
import { IoIosDocument, IoMdClose } from 'react-icons/io'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { TbChevronsDownLeft, TbSignature } from "react-icons/tb";
|
||||
import { TbSignature } from "react-icons/tb";
|
||||
import { BsFileArrowDownFill } from "react-icons/bs";
|
||||
import dayjs from "dayjs";
|
||||
import maskUtils from "../../utlity/maskUtils";
|
||||
import StampUpload from "../stamp/StampUpload";
|
||||
import TermsModal from "./TermsModal";
|
||||
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";
|
||||
import api from "../../config/api";
|
||||
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
|
||||
import { RiDragMoveFill } from "react-icons/ri";
|
||||
import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
|
||||
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
|
||||
|
||||
|
||||
|
||||
|
|
@ -45,6 +43,7 @@ interface RecipientType {
|
|||
phone: string | null;
|
||||
index: number;
|
||||
type: string;
|
||||
provideOwnTags: boolean;
|
||||
recipientStatus: string;
|
||||
authType: string | null;
|
||||
language: string | null;
|
||||
|
|
@ -59,7 +58,7 @@ interface pagesType {
|
|||
height: number;
|
||||
width: number;
|
||||
}
|
||||
interface DocumentType {
|
||||
export interface DocumentType {
|
||||
documentId: string;
|
||||
pages: pagesType[];
|
||||
name: string;
|
||||
|
|
@ -134,6 +133,11 @@ const fitObj = [
|
|||
},
|
||||
]
|
||||
|
||||
enum RightSideNav {
|
||||
ATTRIBUTES = "attributes",
|
||||
PAGES = "pages"
|
||||
}
|
||||
|
||||
// Functions - LIST
|
||||
// handleSignClick - Handle when sign || Initial tag got clicked
|
||||
// fetchData - Fetch document pages and tags data
|
||||
|
|
@ -141,7 +145,6 @@ const fitObj = [
|
|||
|
||||
|
||||
const SignDocument = () => {
|
||||
|
||||
const { recipientId } = useParams();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
|
|
@ -158,7 +161,7 @@ const SignDocument = () => {
|
|||
|
||||
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
|
||||
|
||||
console.log(recSignStatus, "recSignStatus")
|
||||
const [rightSideNavToggle, setRightSideNavToggle] = useState<RightSideNav>(RightSideNav.PAGES);
|
||||
|
||||
// Handling Date Opacity
|
||||
const [dateValues, setDateValues] = useState<{ [key: string]: string }>({});
|
||||
|
|
@ -232,8 +235,6 @@ const SignDocument = () => {
|
|||
}, [droppedItems])
|
||||
|
||||
|
||||
console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
|
||||
|
||||
useEffect(() => {
|
||||
if (recSignStatus === "COMPLETED") {
|
||||
// setHideTags(true);
|
||||
|
|
@ -352,6 +353,8 @@ const SignDocument = () => {
|
|||
setTransaction(res?.data?.transaction)
|
||||
setRecSignStatus(res?.data?.status)
|
||||
|
||||
if (res?.data?.details.provideOwnTags) setRightSideNavToggle(RightSideNav.ATTRIBUTES)
|
||||
|
||||
if ("provideOwnTags" in res?.data?.details && res?.data?.details.provideOwnTags) {
|
||||
setProvideTags(true)
|
||||
}
|
||||
|
|
@ -372,9 +375,23 @@ const SignDocument = () => {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
const handleToastError = (msg: string) => {
|
||||
toast.dismiss();
|
||||
toast.error(msg, {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
|
||||
const handleFormSubmit = () => {
|
||||
|
||||
// e.preventDefault();
|
||||
const submitData: TagsSubmitDataObj = {
|
||||
tags: []
|
||||
|
|
@ -398,37 +415,14 @@ const SignDocument = () => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
if (signInitialsCount !== Object.keys(signConfObj).length) {
|
||||
toast.error("Please ensure all signature and initials are signed", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
handleToastError("Please ensure all signature and initials are signed")
|
||||
return;
|
||||
}
|
||||
|
||||
for (const tag of droppedItems) {
|
||||
|
||||
// if ((tag.type === "SIGNATURE" || tag.subType === "INITIALS") && !tag.value) {
|
||||
if (("required" in tag && tag.required) && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === "" || !("value" in tag)))) {
|
||||
toast.error(`${tag.label} is required`, {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
if ("required" in tag && tag.required && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === undefined || tag.value === null || tag.value === "" || !("value" in tag)))) {
|
||||
handleToastError(`${tag.label} is required`)
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -453,39 +447,7 @@ const SignDocument = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// for (const tag of tagJson) {
|
||||
// if (data[tag.id as string]) {
|
||||
// const tagData: TagSubmitData = {
|
||||
// id: tag.id as string,
|
||||
// type: tag.type,
|
||||
// subType: tag.subType ? tag.subType : "",
|
||||
// signed: true,
|
||||
// value: data[tag.id as string] as string
|
||||
// }
|
||||
// submitData.tags.push(tagData)
|
||||
// }
|
||||
|
||||
// if (tag.type === "SIGNATURE") {
|
||||
// submitData.tags.push({
|
||||
// id: tag.id as string,
|
||||
// type: "SIGNATURE",
|
||||
// subType: "DRAW",
|
||||
// signed: true,
|
||||
// value: ""
|
||||
// })
|
||||
// }
|
||||
|
||||
// if (tag.type === "INITIALS") {
|
||||
// submitData.tags.push({
|
||||
// id: tag.id as string,
|
||||
// type: "INITIALS",
|
||||
// subType: "DRAW",
|
||||
// signed: true,
|
||||
// value: ""
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
// return;
|
||||
|
||||
dispatch(showLoader("Signing ..."));
|
||||
axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, submitData, { headers: { "ngrok-skip-browser-warning": "69420", } })
|
||||
|
|
@ -608,6 +570,58 @@ const SignDocument = () => {
|
|||
}
|
||||
|
||||
|
||||
const handlePrefillValues = () => {
|
||||
const prefilledTags = ["NAME", "EMAIL", "TEXT", "COMPANY", "TEMPORAL"]
|
||||
|
||||
const updatedItems = droppedItems.map((item, index) => {
|
||||
if (prefilledTags.includes(item.type)) {
|
||||
|
||||
let value = null;
|
||||
let isUpdate = false
|
||||
|
||||
switch (item.type) {
|
||||
case "NAME":
|
||||
value = recipient?.firstName + " " + recipient?.lastName;
|
||||
isUpdate = true;
|
||||
break;
|
||||
case "EMAIL":
|
||||
value = recipient?.email;
|
||||
isUpdate = true;
|
||||
break;
|
||||
case "TEXT":
|
||||
value = item.value;
|
||||
isUpdate = true;
|
||||
break;
|
||||
case "COMPANY":
|
||||
value = item.value;
|
||||
isUpdate = true;
|
||||
break;
|
||||
case "TEMPORAL":
|
||||
if (item.currentTimeStamp) isUpdate = true;
|
||||
if (isUpdate) {
|
||||
value = dayjs(Date.now()).format(item.format);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return { ...item, value }
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
setDroppedItems(updatedItems);
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (droppedItems.length > 0) {
|
||||
handlePrefillValues();
|
||||
}
|
||||
}, [droppedItems.length])
|
||||
|
||||
|
||||
// HANDLE DROP - START
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -689,7 +703,7 @@ const SignDocument = () => {
|
|||
isDeleted: false
|
||||
}
|
||||
|
||||
if(prepData.type === "NAME") {
|
||||
if (prepData.type === "NAME") {
|
||||
prepData.firstName = true
|
||||
prepData.lastName = true
|
||||
}
|
||||
|
|
@ -848,18 +862,13 @@ const SignDocument = () => {
|
|||
// Updated handleRemoveTag function with your existing API logic and group handling
|
||||
const handleRemoveTag = (key: string, targetIndex: number) => {
|
||||
|
||||
|
||||
console.log("Removing tag:", key, targetIndex, droppedItems);
|
||||
|
||||
const tag: DroppedItem = droppedItems[targetIndex];
|
||||
const recipientId = tag.recipientId;
|
||||
|
||||
console.log(tag, "line 776");
|
||||
|
||||
(async () => {
|
||||
if ("id" in tag) {
|
||||
try {
|
||||
const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] })
|
||||
const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [{ tagId: tag.id }] })
|
||||
if (response.status !== 200) throw "Tag Deletion error"
|
||||
} catch (err) {
|
||||
return;
|
||||
|
|
@ -927,7 +936,6 @@ const SignDocument = () => {
|
|||
// }, 100);
|
||||
}
|
||||
} else {
|
||||
console.log("Listening to 895")
|
||||
// Handle non-group item removal (your existing logic)
|
||||
setDroppedItems(prevState => prevState.filter((item, idx) => {
|
||||
return idx !== targetIndex;
|
||||
|
|
@ -936,7 +944,10 @@ const SignDocument = () => {
|
|||
})()
|
||||
};
|
||||
|
||||
console.log(droppedItems, "droppedItems Line 934")
|
||||
|
||||
const handleSetIsFields = (setTo: boolean) => {
|
||||
if (setTo !== isFields) setIsFields(setTo);
|
||||
}
|
||||
|
||||
|
||||
// const [showTerms, setShowTerms] = useState<boolean>(true);
|
||||
|
|
@ -990,6 +1001,19 @@ const SignDocument = () => {
|
|||
</div>
|
||||
{/* FIT - END */}
|
||||
|
||||
{provideTags && <div
|
||||
onClick={() => handleSetIsFields(true)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
|
||||
<IoIosDocument />
|
||||
<p className='tracking-wide'>Fields</p>
|
||||
</div>}
|
||||
|
||||
<div
|
||||
onClick={() => handleSetIsFields(provideTags ? false : !isFields)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
|
||||
<IoIosDocument />
|
||||
<p className='tracking-wide'>Pages</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1032,10 +1056,11 @@ const SignDocument = () => {
|
|||
|
||||
{/* Send */}
|
||||
{(!transparentTags && !hideTags) ? <button
|
||||
onClick={handleFormSubmit}
|
||||
// onClick={() => handleFormSubmitBtnClick()}
|
||||
className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
|
||||
<p
|
||||
onClick={handleFormSubmit}
|
||||
|
||||
id="sign-client-side-btn"
|
||||
className='tracking-wide text-white'>
|
||||
Sign
|
||||
|
|
@ -1059,17 +1084,21 @@ const SignDocument = () => {
|
|||
{/* <div className="lg:col-span-2 bg-slate-100 h-full p-4 overflow-y-auto"></div> */}
|
||||
<div
|
||||
id="tags-list-client-side"
|
||||
className={`col-span-2 h-full p-4 overflow-y-auto ${provideTags ? "bg-white" : "order-last"}`}>
|
||||
{recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
|
||||
className={`col-span-2 h-full ${isFields ? "p-4" : ""} overflow-y-auto bg-white ${!provideTags && isFields ? "hidden" : ""}`}>
|
||||
{isFields && recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
|
||||
|
||||
{!isFields && <DocumentPages
|
||||
selectedDocuments={selectedDocuments}
|
||||
setDropDownTogglePage={setDropDownTogglePage}
|
||||
dropDownTogglePage={dropDownTogglePage} />}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* Pages - END */}
|
||||
|
||||
{/* Main container */}
|
||||
<div
|
||||
id="doc-con"
|
||||
className="zoom-con relative col-span-8 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
|
||||
className={`zoom-con relative ${!isFields || (isFields && provideTags) ? "col-span-10" : "col-span-12"} px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth transition-all duration-200`}
|
||||
>
|
||||
|
||||
{
|
||||
|
|
@ -1098,12 +1127,9 @@ const SignDocument = () => {
|
|||
|
||||
{!hideTags && <>
|
||||
|
||||
|
||||
{currDocTags.map((item, index) => {
|
||||
if (item.pageIndex !== page.index || item.documentId != doc.documentId) return <></>;
|
||||
return (
|
||||
<>
|
||||
|
||||
<div
|
||||
tabIndex={1}
|
||||
onFocus={() => {
|
||||
|
|
@ -1111,7 +1137,7 @@ const SignDocument = () => {
|
|||
setFocusElement({ ...item, focusElementIndx: index })
|
||||
}
|
||||
}
|
||||
key={item.id}
|
||||
key={index}
|
||||
// onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className="absolute rounded dropped-item text-sm"
|
||||
// onClick={() => handleTagClick(key, index)}
|
||||
|
|
@ -1147,7 +1173,6 @@ const SignDocument = () => {
|
|||
</p> */}
|
||||
<p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
|
||||
<IoMdClose onClick={(e) => {
|
||||
console.log("Handle Remove Tag Called");
|
||||
|
||||
e.stopPropagation();
|
||||
handleRemoveTag(key, index)
|
||||
|
|
@ -1162,7 +1187,7 @@ const SignDocument = () => {
|
|||
<div
|
||||
id={item.id}
|
||||
tabIndex={1}
|
||||
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
|
||||
className={`max-h-max text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
>
|
||||
|
||||
|
|
@ -1176,7 +1201,7 @@ const SignDocument = () => {
|
|||
!item.multiLine && !item.maskType && <p
|
||||
// name={item.id}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
onInput={(e) => {
|
||||
onBlur={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
|
|
@ -1185,24 +1210,25 @@ const SignDocument = () => {
|
|||
}}
|
||||
contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
></p>
|
||||
>{item.value ?? ""}</p>
|
||||
}
|
||||
{
|
||||
item.multiLine && !item.maskType && <p
|
||||
onInput={(e) => {
|
||||
suppressContentEditableWarning
|
||||
onBlur={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
contentEditable={true}
|
||||
className="w-full outline-none max-h-max"
|
||||
></p>
|
||||
>{item.value ?? ""}</p>
|
||||
}
|
||||
{
|
||||
"maskType" in item && "maskCharacter" in item && item.maskType && <p
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
// onBlur={(e) => {
|
||||
// const val = e.currentTarget.textContent;
|
||||
// handleTagUpdate(index, val as string);
|
||||
// }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.preventDefault();
|
||||
}}
|
||||
|
|
@ -1210,6 +1236,7 @@ const SignDocument = () => {
|
|||
// }}
|
||||
onBlur={(e) => {
|
||||
let val = e.target.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
|
||||
val = val.replace(/ /g, "");
|
||||
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
|
||||
|
|
@ -1268,7 +1295,7 @@ const SignDocument = () => {
|
|||
// contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
>
|
||||
{recipient?.email || ""}
|
||||
{item.value ?? ""}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1304,10 +1331,7 @@ const SignDocument = () => {
|
|||
// contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
>
|
||||
{item.firstName && recipient?.firstName+" " }
|
||||
{item.lastName && recipient?.lastName }
|
||||
|
||||
|
||||
{item.value ?? ""}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1325,6 +1349,10 @@ const SignDocument = () => {
|
|||
>
|
||||
{
|
||||
<input
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.value;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
type="number"
|
||||
className="outline-none h-full max-w-max"
|
||||
/>
|
||||
|
|
@ -1496,6 +1524,10 @@ const SignDocument = () => {
|
|||
<select
|
||||
name={item.id}
|
||||
className="outline-none"
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.value;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{item.options && item.options.map((obj, indx) => {
|
||||
|
|
@ -1529,7 +1561,7 @@ const SignDocument = () => {
|
|||
<p
|
||||
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
|
||||
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
|
||||
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.dateFormat?.toLowerCase()}
|
||||
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()}
|
||||
</p>
|
||||
<input
|
||||
name={item.id}
|
||||
|
|
@ -1550,6 +1582,10 @@ const SignDocument = () => {
|
|||
[item.id as string]: dayjs(val).format(item.format)
|
||||
})
|
||||
}}
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.value;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }}
|
||||
className="w-full px-2 outline-none absolute"
|
||||
onClick={() => {
|
||||
|
|
@ -1613,8 +1649,7 @@ const SignDocument = () => {
|
|||
</div>
|
||||
</>
|
||||
}
|
||||
</div >
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
|
@ -1662,16 +1697,9 @@ const SignDocument = () => {
|
|||
|
||||
</div>
|
||||
|
||||
<div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
|
||||
{/* <DocumentPages
|
||||
selectedDocuments={selectedDocuments}
|
||||
setDropDownTogglePage={setDropDownTogglePage}
|
||||
dropDownTogglePage={dropDownTogglePage} /> */}
|
||||
|
||||
|
||||
|
||||
|
||||
{provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
|
||||
<div className={`col-span-2 ${provideTags ? "" : "order-first"} h-full ${!isFields ? "bg-white" : isFields && provideTags ? "bg-white" : ""} overflow-y-auto`}>
|
||||
{/* Right Side Attributes Section if providedTags - START */}
|
||||
<RightSideBar
|
||||
droppedItems={droppedItems}
|
||||
selectedTag={droppedItems[selectedTag.index]}
|
||||
|
|
@ -1679,11 +1707,10 @@ const SignDocument = () => {
|
|||
selTagKey={selectedTag.key}
|
||||
selTagIndx={selectedTag.index}
|
||||
signClient={true}
|
||||
/>}
|
||||
|
||||
|
||||
|
||||
/>
|
||||
{/* Right Side Attributes Section if providedTags - END */}
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* Right Side - START */}
|
||||
{/* <div className="col-span-2 bg-slate-100 h-full p-4 overflow-y-auto">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const Contacts = () => {
|
|||
const [showModal, setShowModal] = useState(false)
|
||||
const [editJsonData, setEditJsonData] = useState({})
|
||||
const [actionStatus, setActionStatus] = useState("")
|
||||
console.log("editJsonData", editJsonData)
|
||||
|
||||
const fetchContacts = async () => {
|
||||
setLoading(true)
|
||||
|
|
@ -46,7 +45,6 @@ const Contacts = () => {
|
|||
}, [activeAccountId]);
|
||||
|
||||
const handleEdit = (contactId) => {
|
||||
console.log('Edit contact:', contactId);
|
||||
let jsonEditData = contacts.find((prev) => prev.id === contactId)
|
||||
setEditJsonData(jsonEditData)
|
||||
setActionStatus("Edit")
|
||||
|
|
@ -55,7 +53,6 @@ const Contacts = () => {
|
|||
};
|
||||
|
||||
const handleDelete = async (contactId) => {
|
||||
console.log('Delete contact:', contactId);
|
||||
|
||||
try {
|
||||
let res = await api.delete(`/api/accounts/${activeAccountId}/contacts/${contactId}`)
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ const ContactFormModal = ({
|
|||
}, [actionStatus, editJsonData]);
|
||||
|
||||
const handleChange = (field: keyof ContactData, value: string) => {
|
||||
console.log(field, value);
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
||||
|
|
@ -136,7 +135,6 @@ const ContactFormModal = ({
|
|||
const validationErrors = validate();
|
||||
let type = "Add";
|
||||
let payload = formData;
|
||||
console.log(payload);
|
||||
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
setErrors(validationErrors);
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ function Dashboard() {
|
|||
|
||||
// Clear all if transaction success
|
||||
if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {
|
||||
console.log("IN MIC CHECK");
|
||||
|
||||
dispatch(resetSelDoc())
|
||||
dispatch(resetSelRecipient())
|
||||
dispatch(clearTransaction())
|
||||
|
|
@ -86,13 +86,11 @@ function Dashboard() {
|
|||
|
||||
if (documentSignType && transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_NOT_INITIATED) {
|
||||
if (documentSignType === 'self-sign') {
|
||||
console.log('Self Sign');
|
||||
setTimeout(() => {
|
||||
navigate('/process-step-one');
|
||||
}, 1000)
|
||||
return
|
||||
} else if (documentSignType === 'multiple-sign') {
|
||||
console.log('multiple-sign');
|
||||
setTimeout(() => {
|
||||
navigate('/process-step-one');
|
||||
}, 1000)
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPat
|
|||
|
||||
const location = useLocation();
|
||||
const isActive = menuPathMap[location.pathname] === label;
|
||||
console.log('Line 26' , to, icon, label, showSideBar, menuPathMap , "Check" , menuPathMap[location.pathname] === label)
|
||||
|
||||
// const [transactionFilter, setTransationFilter] = useState<TransactionFilterEnum>(TransactionFilterEnum.ALL)
|
||||
|
||||
|
|
|
|||
|
|
@ -72,9 +72,6 @@ const Home = () => {
|
|||
|
||||
const userData = useSelector((state: RootState) => state.user);
|
||||
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
console.log("cards", cards);
|
||||
|
||||
const getDashboardData = async () => {
|
||||
if (!activeAccountId) return;
|
||||
|
||||
|
|
@ -86,7 +83,7 @@ const Home = () => {
|
|||
try {
|
||||
const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
|
||||
setDashboardData(res.data);
|
||||
console.log("Dashboard Data:", res.data);
|
||||
|
||||
const cardDataArray = mapApiDataToCards(res.data);
|
||||
setCards(cardDataArray);
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -28,13 +28,9 @@ const ShowDocs = () => {
|
|||
);
|
||||
};
|
||||
|
||||
console.log(selectedDocs, "selectedDocsselectedDocs")
|
||||
console.log(selectedDocs.length, "LENGTHselectedDocs")
|
||||
|
||||
// Handle button click to update Redux state
|
||||
const handleUpdateSelectedDocs = () => {
|
||||
const selectedDocuments = documents.filter((doc) => selectedDocs.includes(doc.id));
|
||||
console.log(selectedDocuments, "selected Document Line 34 ShowDocs.tsx")
|
||||
dispatch(updateSelectedDocuments({ documents: selectedDocuments }));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@ const StartNow = () => {
|
|||
const transactionId = transactionRes.data.id
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", filesToUpload[0]);
|
||||
|
||||
filesToUpload.forEach(file => {
|
||||
formData.append("file", file);
|
||||
});
|
||||
|
||||
dispatch(uploadDocuments({ formData, accountId, transactionId }))
|
||||
.unwrap()
|
||||
|
|
|
|||
|
|
@ -125,13 +125,13 @@ const StartSection = () => {
|
|||
</div>
|
||||
|
||||
{/* Recent Data Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2 mt-5">
|
||||
<section className="w-full">
|
||||
<TransactionDataTable activeAccountId={activeAccountId}/>
|
||||
</section>
|
||||
<section className="w-full">
|
||||
{/* <section className="w-full">
|
||||
<TemplateTable />
|
||||
</section>
|
||||
</section> */}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ const UploadDoc: React.FC = () => {
|
|||
dispatch(uploadDocuments(formData))
|
||||
.unwrap()
|
||||
.then((res) => {
|
||||
console.log("Documents uploaded", res);
|
||||
// toast.dismiss();
|
||||
// toast.info("📄 Documents uploaded!", {
|
||||
// position: "bottom-right",
|
||||
|
|
|
|||
|
|
@ -201,7 +201,6 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
|||
const DocumentSubmissionOptions = () => {
|
||||
const location = useLocation();
|
||||
const [status, setStatus] = useState(null);
|
||||
console.log("location.pathname", location.pathname, status)
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
const [showConfetti, setShowConfetti] = React.useState(true)
|
||||
if (!accountId || !transactionId) {
|
||||
|
|
@ -216,7 +215,6 @@ const DocumentSubmissionOptions = () => {
|
|||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
console.log('Line 218', selectedDocuments)
|
||||
const [transactionData, setTransactionData] = useState({})
|
||||
|
||||
|
||||
|
|
@ -267,10 +265,6 @@ const DocumentSubmissionOptions = () => {
|
|||
}
|
||||
}, [showConfetti]);
|
||||
|
||||
|
||||
console.log("History length:", window.history.length);
|
||||
|
||||
|
||||
// Step 1: Fetch transaction status
|
||||
useEffect(() => {
|
||||
const fetchTransaction = async () => {
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
|
||||
type RecipientAddCardProps = {
|
||||
addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed
|
||||
};
|
||||
|
||||
const RecipientAddCard: React.FC<RecipientAddCardProps> = ({ addRecipient }) => {
|
||||
|
||||
const [recipient] = useState()
|
||||
|
||||
const handleRecipientAdd = () => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-[var(--primaryLight)] shadow-sm mb-4 w-[650px] rounded-md">
|
||||
<p className="pb-4 text-md">Add Recipient Details</p>
|
||||
<div className="py-1">
|
||||
<input
|
||||
|
||||
type="text"
|
||||
placeholder="Recipient Name"
|
||||
className="w-full p-2 rounded mb-2 bg-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Recipient Email"
|
||||
className="w-full p-2 rounded mb-2 bg-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between py-2">
|
||||
<div className="flex gap-4 justify-end">
|
||||
{[
|
||||
{ label: "Mail To Sign", value: "mailToSign" },
|
||||
{ label: "In-Person", value: "inPerson" },
|
||||
{ label: "CC", value: "cc" }
|
||||
].map((option) => (
|
||||
<label key={option.value} className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
name={`send-type`}
|
||||
value={option.value}
|
||||
defaultChecked={option.value === "mailToSign"}
|
||||
className="accent-blue-500"
|
||||
/>
|
||||
{option.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
// onClick={addRecipient}
|
||||
className="flex cursor-pointer items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600"
|
||||
>
|
||||
<FaPlus /> Add Recipient
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientAddCard;
|
||||
|
|
@ -39,11 +39,10 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
|
|||
let lastUpdate = 0;
|
||||
const delay = 1000;
|
||||
|
||||
const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`);
|
||||
const docProgSSE = new EventSource(`http://192.168.2.176:8083/api/progress/${id}`);
|
||||
|
||||
docProgSSE.addEventListener('progress', (event) => {
|
||||
const jsonData = JSON.parse(event.data);
|
||||
console.log(jsonData, "Kaboom");
|
||||
|
||||
if (jsonData.isComplete) {
|
||||
isCompleted = true;
|
||||
|
|
@ -87,8 +86,6 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
|
|||
};
|
||||
}, [id]);
|
||||
|
||||
console.log(isCompleted, "line 118")
|
||||
|
||||
const radius = 28
|
||||
const circumference = 2 * Math.PI * radius
|
||||
const offset = circumference - (progress / 100) * circumference
|
||||
|
|
@ -103,7 +100,6 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
|
|||
if (res.status === 202) {
|
||||
dispatch(deleteDocument(docId));
|
||||
setDocumentDel({ docId: null, isDel: false });
|
||||
console.log("Document deleted successfully");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const ProcessStepOne = () => {
|
|||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
console.log("searchParams", searchParams.get('useTemplate'))
|
||||
|
||||
const isTamplate = searchParams.get('useTemplate')
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -47,22 +47,11 @@ const ProcessStepOne = () => {
|
|||
const [editCase, setEditCase] = useState<string>("")
|
||||
const [editRecipient, setEditRecipient] = useState({})
|
||||
|
||||
|
||||
|
||||
// if (!accountId || !transactionId) {
|
||||
// window.location.href = "/";
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
// const { selectedDocuments, signType } = useSelector((state: RootState) => state.selectedDocuments)
|
||||
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||
const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
|
||||
const [editRecipientCurrentEmail, setEditRecipientCurrentEmail] = useState('')
|
||||
|
||||
console.log()
|
||||
const userData = useSelector((state: RootState) => state.user)
|
||||
// ProcessStepOne.tsx
|
||||
const topRef = useRef<HTMLDivElement | null>(null);
|
||||
|
|
@ -83,15 +72,9 @@ const ProcessStepOne = () => {
|
|||
}, 5000); // hide icon while typing, show it again after 500ms of no input
|
||||
};
|
||||
|
||||
// const userData = useSelector((state: RootState) => state.user)
|
||||
|
||||
const [transactionDetails, setTransactionDetails] = useState<any>([]);
|
||||
|
||||
console.log("selectedRecipients", selectedRecipients)
|
||||
|
||||
useEffect(() => {
|
||||
// <<<<<<< HEAD
|
||||
// Fetching Transaction Details - START
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
|
||||
|
|
@ -105,38 +88,27 @@ const ProcessStepOne = () => {
|
|||
{ subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
|
||||
)
|
||||
|
||||
// console.log("setTransactionDetails",res.data)
|
||||
} catch (e) {
|
||||
console.log("Error - transactions details")
|
||||
}
|
||||
})()
|
||||
// Fetching Transaction Details - END
|
||||
|
||||
// =======
|
||||
// (async () => {
|
||||
// const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
// console.log(res.data);
|
||||
// })()
|
||||
// >>>>>>> origin/main
|
||||
|
||||
// (async () => {
|
||||
// const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
// console.log(res.data);
|
||||
// })()
|
||||
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
}, [])
|
||||
|
||||
// const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)
|
||||
// const user = useSelector((state: RootState) => state.user)
|
||||
|
||||
const [emailDtls, setEmailDtls] = useState<EmailDtls>({ subject: "Documents for Signature", message: "" });
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(hideLoader());
|
||||
}, [])
|
||||
|
||||
|
||||
const getMinRoutingOrder = () => {
|
||||
return selectedRecipients.reduce((min, recipient) => {
|
||||
return Math.min(min, recipient.routingOrder ?? Infinity);
|
||||
}, Infinity);
|
||||
};
|
||||
|
||||
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
const handleNextClick = async (saveAndClose: boolean = false) => {
|
||||
|
|
@ -172,7 +144,6 @@ const ProcessStepOne = () => {
|
|||
if (SignTypeEnum.selfSign === signType) formError.recipients = false;
|
||||
|
||||
if (formError.documents || formError.recipients || formError.subject || formError.recipientEmailAndLastName) {
|
||||
console.log(selectedDocuments, 'line 193')
|
||||
toast.dismiss();
|
||||
toast.error(`${formError.documents ? "Add Document" : ""}
|
||||
${(formError.documents && formError.recipients) ? " | " : ""}
|
||||
|
|
@ -216,10 +187,17 @@ const ProcessStepOne = () => {
|
|||
|
||||
dispatch(showLoader("Processing Recipients..."));
|
||||
|
||||
let minRoutingOrder = getMinRoutingOrder();
|
||||
// selectedRecipients.forEach((recipient) => {
|
||||
// if (recipient.routingOrder ?? 1 < minRoutingOrder) {
|
||||
// minRoutingOrder = recipient.routingOrder ?? 1;
|
||||
// }
|
||||
// });
|
||||
|
||||
const recipientsData = selectedRecipients.map((recipient, index) => ({
|
||||
id: "id" in recipient ? recipient.id : null,
|
||||
routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
|
||||
provideOwnTags: userData.email === recipient.email ? true : false,
|
||||
provideOwnTags: userData.email === recipient.email && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
|
||||
type: recipient.type,
|
||||
firstName: recipient.firstName,
|
||||
lastName: recipient.lastName,
|
||||
|
|
@ -249,11 +227,10 @@ const ProcessStepOne = () => {
|
|||
await Promise.all(
|
||||
selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
|
||||
recipientId: recipient.id,
|
||||
email: recipient.email,
|
||||
accountId,
|
||||
transactionId,
|
||||
}))
|
||||
)
|
||||
email: recipient.email,
|
||||
})))
|
||||
);
|
||||
|
||||
recipientsDataTemp = [{
|
||||
|
|
@ -274,9 +251,11 @@ const ProcessStepOne = () => {
|
|||
phone: "",
|
||||
accessCode: "",
|
||||
accessCodeDelivery: true,
|
||||
language: "en",
|
||||
language: userData.language ? userData.language : "en",
|
||||
name: `${userData.firstName} ${userData.lastName}`,
|
||||
roleName: ""
|
||||
roleName: "",
|
||||
allowSenderToEdit: true,
|
||||
allowSenderToDelete: true,
|
||||
}]
|
||||
|
||||
try {
|
||||
|
|
@ -288,7 +267,8 @@ const ProcessStepOne = () => {
|
|||
}
|
||||
|
||||
} else {
|
||||
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
if(!accountId || !transactionId) return;
|
||||
dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
}
|
||||
dispatch(showLoader("Processing Message..."));
|
||||
|
||||
|
|
@ -298,11 +278,6 @@ const ProcessStepOne = () => {
|
|||
status: "CREATED"
|
||||
})
|
||||
|
||||
// if (isSendNow) {
|
||||
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
|
||||
// }
|
||||
// else {
|
||||
// setTimeout(() => {
|
||||
dispatch(resetDocuments())
|
||||
dispatch(resetRecipients())
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
||||
|
|
@ -398,7 +373,7 @@ const ProcessStepOne = () => {
|
|||
className='flex items-center gap-3'>
|
||||
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
|
||||
onClick={() => handleNextClick(false, true)}
|
||||
onClick={() => handleNextClick(false)}
|
||||
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
Save & Close
|
||||
|
|
@ -447,13 +422,13 @@ const ProcessStepOne = () => {
|
|||
(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
|
||||
<div className="flex flex-col gap-4 align-start">
|
||||
|
||||
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
|
||||
<RecipientCards userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
|
||||
|
||||
<div
|
||||
ref={topRef}
|
||||
className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''}`}
|
||||
>
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
|
||||
<RecipientAddCard userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -479,7 +454,7 @@ const ProcessStepOne = () => {
|
|||
|
||||
{/* Message */}
|
||||
<div className='flex flex-col'>
|
||||
<label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message for Signers</label>
|
||||
<label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={emailDtls.message}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,12 @@ export interface ContactTypeObj {
|
|||
}
|
||||
|
||||
|
||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => {
|
||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail, showCard = false, recipientData = null }) => {
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
console.log("recipients.length in AddCase", recipients)
|
||||
|
||||
const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
|
||||
const [openContactModal, setOpenContactModal] = useState(false);
|
||||
|
|
@ -40,7 +39,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
const dispatch = useDispatch<AppDispatch>();
|
||||
const formRef = useRef<HTMLFormElement | null>(null);
|
||||
|
||||
const [recipient, setRecipients] = useState<Recipient>({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true });
|
||||
const [recipient, setRecipients] = useState<Recipient>(recipientData !== null ? {...recipientData} : { uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true } );
|
||||
|
||||
const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
|
||||
|
||||
|
|
@ -59,10 +58,6 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
type: false,
|
||||
});
|
||||
|
||||
|
||||
|
||||
console.log(recipient)
|
||||
|
||||
useEffect(() => {
|
||||
if (openContactModal) {
|
||||
if (topRef?.current) {
|
||||
|
|
@ -82,9 +77,9 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
(r.email && r.email === editRecipient?.email)
|
||||
);
|
||||
});
|
||||
console.log("Line 83", exists)
|
||||
|
||||
if (editCase === "Edit" && editRecipient) {
|
||||
console.log("editRecipientAdd", editRecipient)
|
||||
|
||||
if (!exists) {
|
||||
// Recipient was deleted -> reset
|
||||
setEditCase('');
|
||||
|
|
@ -221,9 +216,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
updatedRecipient.hostEmail = "";
|
||||
}
|
||||
|
||||
|
||||
if (editCase === "Edit") {
|
||||
dispatch(updateRecipient(updatedRecipient));
|
||||
} else {
|
||||
updatedRecipient.routingOrder = 1;
|
||||
dispatch(addRecipient({
|
||||
...updatedRecipient,
|
||||
uuid: uuidv4(),
|
||||
|
|
@ -269,6 +266,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
|
||||
|
||||
const handleFocus = async (field: "firstName" | "lastName" | "email") => {
|
||||
|
||||
setManualFocusTriggered(true);
|
||||
setOpenContactModal(true);
|
||||
setActiveField(field);
|
||||
|
|
@ -278,7 +276,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
try {
|
||||
const res = await api.get(`/api/accounts/${activeAccountId}/contacts?pageSize=10`);
|
||||
const contacts = res.data?.content || [];
|
||||
setCachedContacts(contacts);
|
||||
setCachedContacts([...contacts]);
|
||||
setFilteredContacts(contacts);
|
||||
setContactData({ type: field, contacts });
|
||||
setHasFetchedInitial(true);
|
||||
|
|
@ -296,11 +294,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
|
||||
|
||||
useDebouncedEffect(() => {
|
||||
console.log("useDebouncedEffect")
|
||||
if (!activeField || !manualFocusTriggered) return;
|
||||
|
||||
const inputValue = recipient[activeField].trim().toLowerCase();
|
||||
|
||||
const inputValue = recipient[activeField].trim().toLowerCase();
|
||||
console.log(inputValue, "Line 297", activeField)
|
||||
if (inputValue.length === 0) {
|
||||
setFilteredContacts(cachedContacts);
|
||||
setContactData({ type: activeField, contacts: cachedContacts });
|
||||
|
|
@ -320,12 +318,21 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (lastQuery !== inputValue) {
|
||||
if(lastQuery !== null && inputValue.startsWith(lastQuery)) return
|
||||
|
||||
setLastQuery(inputValue);
|
||||
api
|
||||
.get(`/api/accounts/${activeAccountId}/contacts?pageSize=5&${activeField}=${inputValue}`)
|
||||
.then((res) => {
|
||||
console.log(res, "Printing RES")
|
||||
const fetched = res.data?.content || [];
|
||||
setCachedContacts([...fetched]);
|
||||
setFilteredContacts(fetched);
|
||||
setContactData({ type: activeField, contacts: fetched });
|
||||
setOpenContactModal(true);
|
||||
|
|
@ -486,7 +493,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
onBlur={handleContactModalBlur}
|
||||
value={recipient.firstName}
|
||||
placeholder="First Name"
|
||||
className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
onChange={(e) => {
|
||||
setRecipients({ ...recipient, firstName: e.target.value });
|
||||
|
|
@ -600,12 +607,12 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
{!showCard && <button
|
||||
type="submit"
|
||||
className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
|
||||
>
|
||||
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
</button>
|
||||
</button>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ const getInitials = (name: string) => {
|
|||
};
|
||||
|
||||
type CardsData = {
|
||||
userEmail: string;
|
||||
getMinRoutingOrder: () => number;
|
||||
editRecipient: any;
|
||||
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
|
||||
setEditCase: (string: any) => void;
|
||||
|
|
@ -36,11 +38,10 @@ type CardsData = {
|
|||
};
|
||||
|
||||
|
||||
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => {
|
||||
const RecipientCards = ({ userEmail, getMinRoutingOrder, setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => {
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!transactionId) {
|
||||
|
|
@ -59,12 +60,15 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
};
|
||||
|
||||
const handleEditRecipient = (recipient) => {
|
||||
|
||||
const provideOwnTags = userEmail === recipient.email && (recipient.routingOrder ?? 1) === getMinRoutingOrder() ? true : false;
|
||||
// alert(JSON.stringify(recipient))
|
||||
setEditCase('Edit')
|
||||
setEditRecipient(recipient)
|
||||
setEditRecipient({...recipient, provideOwnTags})
|
||||
|
||||
if (recipient.uuid) {
|
||||
setEditRecipientCurrentEmail(recipient.uuid)
|
||||
}else{
|
||||
} else {
|
||||
setEditRecipientCurrentEmail(recipient.id)
|
||||
}
|
||||
}
|
||||
|
|
@ -148,11 +152,13 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
{recipients.length > 1 ? <div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={recipient.routingOrder || 1}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
}
|
||||
value={recipient.routingOrder ? recipient.routingOrder : ""}
|
||||
// min={1}
|
||||
onChange={(e) => {
|
||||
let val = e.target.value.replace(/^0+(?=\d)/, "");
|
||||
console.log(val, "Line 155")
|
||||
handleOrderChange(recipient.id || recipient.email, Number(val))
|
||||
}}
|
||||
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
|
||||
/>
|
||||
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
|
||||
|
|
@ -160,7 +166,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
: <input
|
||||
type="number"
|
||||
disabled
|
||||
value={recipient.routingOrder || 1}
|
||||
value={recipient.routingOrder}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
|
||||
|
|
|
|||
|
|
@ -52,8 +52,10 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
|
|||
|
||||
const handleUpload = (filesToUpload: File[]) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", filesToUpload[0])
|
||||
console.log(formData, "Line 59")
|
||||
|
||||
filesToUpload.forEach(file => {
|
||||
formData.append("file", file);
|
||||
});
|
||||
// filesToUpload.forEach((file) => formData.append("document", file));
|
||||
|
||||
dispatch(uploadDocuments({ formData, accountId, transactionId }))
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
|
|||
|
||||
type PropsType = {
|
||||
setShowSelfSignWarnModal: (val: boolean) => void;
|
||||
onConfirm: () => void;
|
||||
onConfirm?: () => void;
|
||||
};
|
||||
|
||||
const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,626 @@
|
|||
// Functions - START
|
||||
// -- handleTagClick
|
||||
// -- handleRemoveTag
|
||||
// -- handleTagMouseDown
|
||||
// -- handleExpandTag
|
||||
// -- removeGroupBorders
|
||||
// -- handleIGroupBorderPosition
|
||||
// -- handleGroupBorderPosition
|
||||
// -- handleAddGroupItemClicked
|
||||
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import { DroppedItemsObj } from './DocumentContainer';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import api from '../../../config/api';
|
||||
import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
interface DroppedItemsTagsConProps {
|
||||
droppedItems: DroppedItemsObj;
|
||||
pageIdkey: string;
|
||||
selectedTag: { key: string; index: number } | null;
|
||||
selectedRecipients: Recipient[];
|
||||
setSelectedTag: React.Dispatch<React.SetStateAction<{ key: string; index: number } | null>>;
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
|
||||
accountId: string;
|
||||
transactionId: string;
|
||||
transactionTemplateToggle: string;
|
||||
}
|
||||
|
||||
const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
||||
droppedItems,
|
||||
pageIdkey,
|
||||
selectedTag,
|
||||
selectedRecipients,
|
||||
setSelectedTag,
|
||||
setDroppedItems,
|
||||
accountId,
|
||||
transactionId,
|
||||
transactionTemplateToggle
|
||||
}) => {
|
||||
|
||||
const positionRef = useRef<{ left: number; top: number }>({ left: 0, top: 0 });
|
||||
|
||||
const handleTagClick = (key: string, index: number) => {
|
||||
setSelectedTag({ key, index })
|
||||
}
|
||||
|
||||
const handleRemoveTag = (key: string, targetIndex: number) => {
|
||||
const tag = droppedItems[key][targetIndex];
|
||||
const recipientId = tag.recipientId;
|
||||
|
||||
(async () => {
|
||||
if ("id" in tag) {
|
||||
try {
|
||||
const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
|
||||
if (response.status !== 200) throw "Tag Deletion error"
|
||||
} catch (err) {
|
||||
console.error("Tag Deletion error")
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedTag(null);
|
||||
|
||||
// Check if this item has a group for special group handling
|
||||
if ('group' in tag && tag.group) {
|
||||
const groupId = tag.group;
|
||||
|
||||
// Find all items in the same group
|
||||
const groupItems = droppedItems[key]
|
||||
.map((item, idx) => ({ item, index: idx }))
|
||||
.filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
|
||||
|
||||
// Sort group items by their top position to identify the parent (top-most)
|
||||
groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
|
||||
|
||||
// Check if the item being removed is the parent (top-most item)
|
||||
const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
|
||||
|
||||
if (isParentItem && groupItems.length > 1) {
|
||||
// If removing the parent and there are child items, mark all items in the group as deleted
|
||||
console.log(`Removing parent item and all children for group: ${groupId}`);
|
||||
|
||||
// Get indices of all group items to mark as deleted
|
||||
const indicesToDelete = groupItems.map(({ index }) => index);
|
||||
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: prevState[key].map((item, index) =>
|
||||
indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item
|
||||
)
|
||||
}));
|
||||
|
||||
// Remove group border elements after state update
|
||||
setTimeout(() => {
|
||||
removeGroupBorders(groupId);
|
||||
}, 100);
|
||||
|
||||
} else {
|
||||
// If removing a child item or the only item in group, just mark this item as deleted
|
||||
console.log(`Removing individual item from group: ${groupId}`);
|
||||
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: prevState[key].map((item, index) =>
|
||||
index === targetIndex ? { ...item, isDeleted: true } : item
|
||||
)
|
||||
}));
|
||||
|
||||
// Check if this was the last item in the group after state update
|
||||
setTimeout(() => {
|
||||
const remainingGroupItems = droppedItems[key].filter(item =>
|
||||
'group' in item && item.group === groupId && !item.isDeleted
|
||||
);
|
||||
|
||||
if (remainingGroupItems.length === 0) {
|
||||
// Remove group borders if no items left
|
||||
removeGroupBorders(groupId);
|
||||
} else {
|
||||
// Update group borders for remaining items
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
// Handle non-group item removal (your existing logic)
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: prevState[key].map((item, index) =>
|
||||
index === targetIndex ? { ...item, isDeleted: true } : item
|
||||
)
|
||||
}));
|
||||
}
|
||||
})()
|
||||
};
|
||||
|
||||
// HANDLE TAG MOUSE DOWN - START
|
||||
// Updated handleTagMouseDown function with proper group border positioning
|
||||
const handleTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
event.preventDefault();
|
||||
|
||||
let targetContainer = event?.currentTarget?.parentElement?.parentElement;
|
||||
let targetElement = event?.currentTarget?.parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
|
||||
// Calculate the initial offset (where the mouse was clicked inside the element)
|
||||
const offsetX = event.clientX - elementRect.left;
|
||||
const offsetY = event.clientY - elementRect.top;
|
||||
|
||||
positionRef.current = { left: event.clientX - containerRect.left - offsetX, top: event.clientY - containerRect.top - offsetY };
|
||||
|
||||
const conScrollWidth = targetContainer?.scrollWidth;
|
||||
const conScrollHeight = targetContainer?.scrollHeight;
|
||||
|
||||
let isGroupAttr = event.currentTarget.hasAttribute("group");
|
||||
let groupId = null;
|
||||
if (isGroupAttr) {
|
||||
groupId = event.currentTarget.getAttribute("group");
|
||||
}
|
||||
|
||||
let groupElements: NodeListOf<HTMLElement> | null = null;
|
||||
if (isGroupAttr && groupId) {
|
||||
groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
// Show initial border position during drag start
|
||||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
}
|
||||
|
||||
// let timeOut = null
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// Get new X and Y positions relative to the container
|
||||
let left = event.clientX - containerRect.left - offsetX;
|
||||
let top = event.clientY - containerRect.top - offsetY;
|
||||
|
||||
// Restrict movement within container bounds
|
||||
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
|
||||
top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
|
||||
|
||||
// Save in ref (fast, no re-render)
|
||||
positionRef.current = { left, top };
|
||||
|
||||
// Update DOM directly
|
||||
targetElement!.style.top = `${top}px`;
|
||||
targetElement!.style.left = `${left}px`;
|
||||
|
||||
// Apply the movement to the element first
|
||||
// setDroppedItems(prevState => ({
|
||||
// ...prevState,
|
||||
// [key]: Array.isArray(prevState[key])
|
||||
// ? prevState[key].map((item, i) =>
|
||||
// i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
// )
|
||||
// : [],
|
||||
// }));
|
||||
|
||||
// Update group border position during drag if it's a group element
|
||||
if (groupElements != null && groupElements.length) {
|
||||
// Use a small timeout to ensure DOM is updated before recalculating borders
|
||||
requestAnimationFrame(() => {
|
||||
handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
// CRITICAL: Ensure group borders are properly positioned after drag ends
|
||||
if (groupElements != null && groupElements.length && groupId) {
|
||||
// Multiple approaches to ensure the positioning works:
|
||||
|
||||
// 1. Immediate update
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 10);
|
||||
|
||||
// 2. Secondary update to ensure it's properly positioned
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 100);
|
||||
|
||||
// 3. Final update using requestAnimationFrame for DOM sync
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
|
||||
const { left, top } = positionRef.current;
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: Array.isArray(prevState[key])
|
||||
? prevState[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}));
|
||||
|
||||
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
||||
// Add event listeners
|
||||
document.addEventListener("pointermove", handleMouseMove);
|
||||
document.addEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
// HANDLE TAG MOUSE DOWN - END
|
||||
|
||||
// HANDLE EXPAND TAG - START
|
||||
const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
event.preventDefault(); // Prevent text selection issues
|
||||
|
||||
const expandingElemIcon = event.currentTarget;
|
||||
const targetElement = expandingElemIcon.nextElementSibling?.parentElement;
|
||||
const targetContainer = targetElement?.parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
const startX = event.clientX;
|
||||
const startY = event.clientY;
|
||||
|
||||
const startWidth = elementRect.width;
|
||||
const startHeight = elementRect.height;
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
|
||||
let newWidth = startWidth + (event.clientX - startX);
|
||||
let newHeight = startHeight + (event.clientY - startY);
|
||||
|
||||
if (newHeight > 200 || newWidth > 400) {
|
||||
if (newHeight > 200) {
|
||||
newHeight = 200
|
||||
}
|
||||
|
||||
if (newWidth > 400) {
|
||||
newWidth = 400
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the new width & height
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: Array.isArray(droppedItems[key]) // Ensure it's an array
|
||||
? droppedItems[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
|
||||
)
|
||||
: [], // Provide a fallback in case it's undefined or not an array
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener("pointermove", handleMouseMove);
|
||||
document.addEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
// HANDLE EXPAND TAG - END
|
||||
|
||||
const removeGroupBorders = (groupId: string) => {
|
||||
console.log(`Removing borders for group: ${groupId}`);
|
||||
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
const borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`);
|
||||
if (borderElement && borderElement.parentNode) {
|
||||
borderElement.parentNode.removeChild(borderElement);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleIGroupBorderPosition = (groupId: string) => {
|
||||
const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
|
||||
if (groupElements.length === 0) {
|
||||
console.log("No group elements found for:", groupId);
|
||||
return;
|
||||
}
|
||||
|
||||
let targetContainer = groupElements[0].parentElement?.parentElement;
|
||||
|
||||
if (!targetContainer) {
|
||||
console.log("No target container found");
|
||||
return;
|
||||
}
|
||||
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
|
||||
// Use consistent offset values
|
||||
const offsetX = 10;
|
||||
const offsetY = 10;
|
||||
|
||||
// Ensure DOM is fully updated before positioning
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
||||
if (!groupElements || groupElements.length === 0) return;
|
||||
|
||||
const groupId = groupElements[0].getAttribute('group');
|
||||
if (!groupId) return;
|
||||
|
||||
// Calculate the bounding box of all group elements
|
||||
let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
|
||||
|
||||
groupElements.forEach(element => {
|
||||
const parentElement = element.parentElement;
|
||||
if (!parentElement) return;
|
||||
|
||||
const rect = parentElement.getBoundingClientRect();
|
||||
const relativeLeft = rect.left - containerRect.left;
|
||||
const relativeTop = rect.top - containerRect.top;
|
||||
const relativeRight = relativeLeft + rect.width;
|
||||
const relativeBottom = relativeTop + rect.height;
|
||||
|
||||
minLeft = Math.min(minLeft, relativeLeft);
|
||||
minTop = Math.min(minTop, relativeTop);
|
||||
maxRight = Math.max(maxRight, relativeRight);
|
||||
maxBottom = Math.max(maxBottom, relativeBottom);
|
||||
});
|
||||
|
||||
// Add some padding around the group
|
||||
const padding = 10;
|
||||
minLeft -= padding;
|
||||
minTop -= padding;
|
||||
maxRight += padding;
|
||||
maxBottom += padding;
|
||||
|
||||
const width = maxRight - minLeft;
|
||||
const height = maxBottom - minTop;
|
||||
|
||||
// Update or create border elements
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
|
||||
|
||||
if (!borderElement) {
|
||||
// Create border element if it doesn't exist
|
||||
borderElement = document.createElement('div');
|
||||
borderElement.className = `group-border ${position === 'bottom' ? 'bottom-border' : ''}`;
|
||||
borderElement.setAttribute('border-group', groupId);
|
||||
borderElement.setAttribute('border-pos', position);
|
||||
|
||||
// Add the + icon for bottom border
|
||||
if (position === 'bottom') {
|
||||
const addIcon = document.createElement('div');
|
||||
addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
|
||||
addIcon.onclick = () => {
|
||||
// Find the original item to pass to handleAddGroupItemClicked
|
||||
const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group === groupId);
|
||||
if (originalItem) {
|
||||
handleAddGroupItemClicked(key, originalItem);
|
||||
}
|
||||
};
|
||||
borderElement.appendChild(addIcon);
|
||||
}
|
||||
|
||||
// Append to container
|
||||
groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
|
||||
}
|
||||
|
||||
// Position the border element
|
||||
borderElement.style.position = 'absolute';
|
||||
borderElement.style.pointerEvents = position === 'bottom' ? 'auto' : 'none';
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'right':
|
||||
borderElement.style.left = `${maxRight - 2}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
case 'bottom':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${maxBottom - 2}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'left':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddGroupItemClicked = (key: string, item: any) => {
|
||||
const groupId = item.group;
|
||||
|
||||
// Find all existing items in this group to determine the bottom-most position
|
||||
const existingGroupItems = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
const existingGroupItem = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
existingGroupItem[0].options
|
||||
|
||||
// Find the bottom-most item in the group
|
||||
let bottomMostItem = item;
|
||||
if (existingGroupItems.length > 0) {
|
||||
bottomMostItem = existingGroupItems.reduce((lowest, current) => {
|
||||
const currentBottom = current.dimensions.top + current.dimensions.height;
|
||||
const lowestBottom = lowest.dimensions.top + lowest.dimensions.height;
|
||||
return currentBottom > lowestBottom ? current : lowest;
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate new position: place below the bottom-most item
|
||||
const spacing = 10; // Adjust spacing as needed
|
||||
const newTop = bottomMostItem.dimensions.top + bottomMostItem.dimensions.height + spacing;
|
||||
|
||||
// Use the same left position as the parent (original) item
|
||||
const newItem = {
|
||||
...item,
|
||||
dimensions: {
|
||||
...item.dimensions,
|
||||
left: item.dimensions.left, // Keep same horizontal position as parent
|
||||
top: newTop // Position below the bottom-most item
|
||||
},
|
||||
isGroupExist: true
|
||||
};
|
||||
|
||||
// Update the dropped items
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: [...droppedItems[key], newItem],
|
||||
});
|
||||
|
||||
// Update group borders after adding the new item
|
||||
// Use setTimeout to ensure state update is processed
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 50); // Slightly longer timeout to ensure DOM updates
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize group borders for all existing groups after component updates
|
||||
const timeoutId = setTimeout(() => {
|
||||
const allGroupElements = document.querySelectorAll('[group]');
|
||||
const groupIds = new Set<string>();
|
||||
|
||||
allGroupElements.forEach((element) => {
|
||||
const groupId = element.getAttribute('group');
|
||||
if (groupId) {
|
||||
groupIds.add(groupId);
|
||||
}
|
||||
});
|
||||
|
||||
groupIds.forEach((groupId) => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
});
|
||||
}, 0);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [droppedItems]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
|
||||
{droppedItems[pageIdkey]?.map((item, index) => {
|
||||
if (item.isDeleted) return;
|
||||
|
||||
const type = item.type.toUpperCase();
|
||||
const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
|
||||
const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<div
|
||||
// key={index}
|
||||
draggable="false"
|
||||
data-tag-id={index}
|
||||
data-tag-selected={index === selectedTag?.index}
|
||||
className="absolute rounded dropped-item"
|
||||
onClick={() => handleTagClick(pageIdkey, index)}
|
||||
style={{
|
||||
left: `${item.dimensions.left}px`,
|
||||
top: `${item.dimensions.top}px`,
|
||||
width: item.type === "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
|
||||
height: item.type === "radio" ? `max-content` : `${item.dimensions.height}px`
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
{/* If Selected Tag Recipient Info- START */}
|
||||
{selectedTag?.key && selectedTag.key === pageIdkey && selectedTag.index === index &&
|
||||
<div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
|
||||
<div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
|
||||
<p className='w-2.5 h-2.5 rounded'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
></p>
|
||||
<p
|
||||
className=''>{IconComponent}
|
||||
</p>
|
||||
<p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
|
||||
<IoMdClose onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveTag(pageIdkey, index)
|
||||
}} className='cursor-pointer' />
|
||||
</div>
|
||||
</div>}
|
||||
{/* If Selected Tag Recipient Info- END */}
|
||||
|
||||
|
||||
{/* Expand Circle - STARTS */}
|
||||
{item.type !== "radio" && item.type !== "checkbox" && <div
|
||||
onPointerDown={(e) => handleExpandTag(e, pageIdkey, index)}
|
||||
className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
|
||||
</div>}
|
||||
{/* Expand Circle - ENDS */}
|
||||
|
||||
{/* Tag - START */}
|
||||
{
|
||||
<div
|
||||
{...("group" in item && item.group ? { "group": item.group } : {})}
|
||||
onPointerDown={(e) => handleTagMouseDown(e, pageIdkey, index)}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{/* Tag - END */}
|
||||
|
||||
</div>
|
||||
|
||||
<>
|
||||
{
|
||||
"group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
|
||||
<>
|
||||
<div className="group-border" border-group={item.group} border-pos="top"></div>
|
||||
<div className="group-border" border-group={item.group} border-pos="right"></div>
|
||||
<div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
|
||||
<div
|
||||
onClick={() => handleAddGroupItemClicked(pageIdkey, item)}>
|
||||
<IoAdd />
|
||||
</div>
|
||||
</div>
|
||||
<div className="group-border" border-group={item.group} border-pos="left"></div>
|
||||
</>
|
||||
|
||||
}
|
||||
</>
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
)}
|
||||
{/* Render only the dropped items for this specific docId and page - ENDS */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DroppedItemsTagsCon
|
||||
|
|
@ -83,7 +83,10 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
|
|||
.then((res) => {
|
||||
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
|
||||
|
||||
const data = res.data;
|
||||
const data = res.data.filter((obj, indx) => {
|
||||
// if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
|
||||
return true
|
||||
});
|
||||
|
||||
// Separate prioritized and other tags
|
||||
const prioritized = data.filter((tag: any) =>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import { RootState } from '../../../store/store';
|
|||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import FieldList from './FieldList';
|
||||
|
||||
import { addColorsToRecipient, fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
|
||||
import { addColorsToRecipient, fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
import { IoCheckmark } from 'react-icons/io5'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md'
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice';
|
||||
import { GrFormPrevious } from 'react-icons/gr';
|
||||
|
||||
interface LeftSideBarProps {
|
||||
isFields: boolean;
|
||||
|
|
@ -36,6 +37,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRecipients.length === 0) {
|
||||
dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
|
|
@ -94,6 +97,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
<div
|
||||
className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
|
||||
{selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
|
||||
if (recipient.type === recipientType.CC) return null; // Skip CC recipients
|
||||
return (<div
|
||||
key={indx}
|
||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
||||
|
|
@ -151,7 +155,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
document.pages != undefined && <img
|
||||
key={indx}
|
||||
className='rounded-sm shadow'
|
||||
src={document.pages[0].src}
|
||||
src={"data:image/png;base64," + document.thumbnail}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
|
|
@ -165,18 +169,57 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
|
|||
|
||||
{
|
||||
dropDownTogglePage === 'pageDropDown' + indx &&
|
||||
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
|
||||
{document.pages != undefined && document.pages.map((img, indx) => (
|
||||
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
||||
{/* Prev Button */}
|
||||
<a
|
||||
href={"#" + document.id + indx}
|
||||
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
|
||||
href={"#" + document.id + (currentPage - 1)}
|
||||
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage === 0) e.preventDefault();
|
||||
else setCurrentPage(currentPage - 1);
|
||||
}}
|
||||
>
|
||||
<p className='text-center text-xs text-slate-600'>{indx + 1}</p>
|
||||
<GrFormPrevious />
|
||||
</a>
|
||||
|
||||
{/* Page Selector */}
|
||||
<select
|
||||
className="w-[58px] py-1 text-xs text-slate-400 outline-none"
|
||||
value={currentPage}
|
||||
onChange={(e) => {
|
||||
const newPage = Number(e.target.value);
|
||||
setCurrentPage(newPage);
|
||||
window.location.hash = document.id +""+ newPage;
|
||||
}}
|
||||
>
|
||||
{document.pages != undefined && document.pages.map((_, pageIndex) => (
|
||||
<option key={pageIndex} value={pageIndex}>
|
||||
{pageIndex + 1}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<span className="text-xs text-slate-600">
|
||||
/ {document.pages?.length}
|
||||
</span>
|
||||
|
||||
{/* Next Button */}
|
||||
<a
|
||||
href={"#" + document.id + (currentPage + 1)}
|
||||
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage === document.pages?.length - 1) e.preventDefault();
|
||||
else setCurrentPage(currentPage + 1);
|
||||
}}
|
||||
>
|
||||
<MdOutlineNavigateNext />
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { IoIosDocument } from 'react-icons/io'
|
|||
import { LuTableOfContents } from 'react-icons/lu'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { RiResetRightLine } from 'react-icons/ri'
|
||||
import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
|
||||
import { fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Bounce, toast } from 'react-toastify'
|
||||
|
|
@ -91,7 +91,8 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
let userEmailPresent = {
|
||||
present: false,
|
||||
routingOrder: 0,
|
||||
recipientId: 0
|
||||
recipientId: 0,
|
||||
type: recipientType.CC
|
||||
};
|
||||
// Getting Minimum RoutingOrder
|
||||
for (let i = 0; i < selectedRecipients.length; i++) {
|
||||
|
|
@ -104,10 +105,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
userEmailPresent.present = true;
|
||||
userEmailPresent.routingOrder = recipient.routingOrder;
|
||||
userEmailPresent.recipientId = recipient.id;
|
||||
userEmailPresent.type = recipient.type;
|
||||
}
|
||||
}
|
||||
|
||||
if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder) {
|
||||
if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder && userEmailPresent.type !== recipientType.CC && userEmailPresent.type !== recipientType.INPERSONSIGNER) {
|
||||
setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +128,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
setTimeout(() => {
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
if (isSignSend) {
|
||||
navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
|
||||
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
|
||||
}
|
||||
else {
|
||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
|
||||
|
|
@ -167,25 +169,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
zoom(Number(indx), 'zoom-con')
|
||||
}, [selFitIndx])
|
||||
|
||||
// useEffect(() => {
|
||||
// let timeoutId: number;
|
||||
// const timeOutIn = 8000;
|
||||
|
||||
// const updateLabel = () => {
|
||||
// if (document.visibilityState === 'visible') {
|
||||
// setTransactionSaving(true);
|
||||
// setTimeout(() => {
|
||||
// setTransactionSaving(false);
|
||||
// }, 4000)
|
||||
// }
|
||||
// timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
// };
|
||||
// timeoutId = setTimeout(updateLabel, timeOutIn);
|
||||
|
||||
// // Cleanup on unmount
|
||||
// return () => clearTimeout(timeoutId);
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!transactionSaving) return;
|
||||
|
||||
|
|
@ -221,16 +204,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
<p className='tracking-wide'>Pages</p>
|
||||
</div>
|
||||
|
||||
{/* <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
||||
<RiResetLeftLine />
|
||||
<p className='tracking-wide'>Reset</p>
|
||||
</div> */}
|
||||
|
||||
{/* <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
||||
<p className='tracking-wide'>Fit</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
tabIndex={1}
|
||||
onBlur={() => setIsFitDd(false)}
|
||||
|
|
@ -281,7 +254,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
<MdKeyboardArrowDown className={`${nav2DocToggle ? 'rotate-180' : ''} transition-all`} />
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
className={`absolute max-w-max shadow rounded-md mt-1 px-2 py-1 z-20 bg-white ${nav2DocToggle ? '' : 'hidden'}`}>
|
||||
|
||||
|
|
@ -312,7 +284,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{recipient.firstName} {recipient.lastName}</p>
|
||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[22ch]'>{recipient.type + " | "} {recipient.firstName} {recipient.lastName}</p>
|
||||
</div>
|
||||
</div>)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,6 @@ const ProcessStepTwo = () => {
|
|||
}, 800)
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
|
||||
<NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
interface LabelAttrInt {
|
||||
label: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Label</label>
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
||||
type="text"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LabelAttr
|
||||
|
|
@ -1,30 +1,23 @@
|
|||
import { DroppedItemsObj } from "../DocumentContainer";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
|
||||
import { DroppedItem, StylesInterface } from "../../../../utlity/types";
|
||||
import { IoIosArrowDown } from "react-icons/io";
|
||||
|
||||
import { TagsTypes } from "../../../../utlity/types";
|
||||
|
||||
import LabelAttr from "./LabelAttr";
|
||||
import RequiredAttr from "./RequiredAttr";
|
||||
import CurrTimeStampAttr from "./currTimeStampAttr";
|
||||
import CommonAttrDropDown from "./CommonAttrDropDown";
|
||||
import MaskTypePassAttr from "./MaskTypePassAttr";
|
||||
import TemporalDateAttr from "./TemporalDateAttr";
|
||||
import SelectTagAttr from "./SelectTagAttr";
|
||||
import MaxMinLenAttr from "./MaxMinLenAttr";
|
||||
import RecipientsAttrCon from "./RecipientsAttrCon";
|
||||
import MovableFieldContainer from "./MovableField";
|
||||
import DirectionalControls from "./DirectionalControls";
|
||||
|
||||
// interface DirectionalControlsProps {
|
||||
// onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
|
||||
// disabled?: boolean;
|
||||
// stepSize?: number;
|
||||
// className?: string;
|
||||
// }
|
||||
import LabelAttr from "./attributes/LabelAttr";
|
||||
import RequiredAttr from "./attributes/RequiredAttr";
|
||||
import CommonAttrDropDown from "./attributes/CommonAttrDropDown";
|
||||
import MaskTypePassAttr from "./attributes/MaskTypePassAttr";
|
||||
import TemporalDateAttr from "./attributes/TemporalDateAttr";
|
||||
import SelectTagAttr from "./attributes/SelectTagAttr";
|
||||
import MaxMinLenAttr from "./attributes/MaxMinLenAttr";
|
||||
import RecipientsAttrCon from "./attributes/RecipientsAttrCon";
|
||||
import DirectionalControls from "./attributes/DirectionalControls";
|
||||
import TextValueFIll from "./attributes/TextValueFIll";
|
||||
import CurrTimeStampAttr from "./attributes/CurrTimeStampAttr";
|
||||
import ToolTipAttr from "./attributes/ToolTipAttr";
|
||||
|
||||
export interface DroppedItemProps {
|
||||
droppedItems: DroppedItem[]
|
||||
|
|
@ -33,12 +26,6 @@ export interface DroppedItemProps {
|
|||
selTagKey: string,
|
||||
selTagIndx: number,
|
||||
signClient: boolean,
|
||||
// DirectionalControlsProps: {
|
||||
// onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
// disabled?: boolean;
|
||||
// stepSize?: number;
|
||||
// className?: string;
|
||||
// }
|
||||
}
|
||||
|
||||
export enum TEXT {
|
||||
|
|
@ -115,124 +102,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
|
||||
console.log("changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '') return
|
||||
|
||||
// if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
|
||||
// if (!signClient) {
|
||||
// setDroppedItems((prev) => (
|
||||
// {
|
||||
// ...prev,
|
||||
// [selTagKey]: Array.isArray(prev[selTagKey])
|
||||
// ? prev[selTagKey].map((item, i) =>
|
||||
// i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
|
||||
// )
|
||||
// : [],
|
||||
// }
|
||||
// ));
|
||||
// } else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
|
||||
// return updated;
|
||||
// })
|
||||
// }
|
||||
// } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
||||
// let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
||||
// const isCurrency = changeWith === NUMBER.CURRENCY;
|
||||
// // const currencyType = null
|
||||
|
||||
// if (!signClient) {
|
||||
// setDroppedItems((prev) => (
|
||||
// {
|
||||
// ...prev,
|
||||
// [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
// ? prev[selTagKey].map((item, i) =>
|
||||
// i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
|
||||
// )
|
||||
// : [],
|
||||
// }// Provide a fallback in case it's undefined or not an array
|
||||
// ));
|
||||
// } else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
// else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
|
||||
// let val = timeFormats[0].format;
|
||||
|
||||
// if (is24Hrs === null) {
|
||||
// val = timeFormats[0].format
|
||||
// } else if (!is24Hrs) {
|
||||
// val = timeFormats[1].format
|
||||
// } else {
|
||||
// val = timeFormats[0].format
|
||||
// }
|
||||
// // console.log("val", val, is24Hrs)
|
||||
|
||||
// // if(is24Hrs === null) {
|
||||
// // changeWith = changeWith + " " + val;
|
||||
// // }
|
||||
|
||||
|
||||
// if (!signClient) {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updatedArray = Array.isArray(prev[selTagKey])
|
||||
// ? prev[selTagKey].map((item, i) => {
|
||||
// if (i === selTagIndx) {
|
||||
// const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
|
||||
// console.log('Updating item at index', i, 'with:', updatedItem);
|
||||
// return updatedItem;
|
||||
// }
|
||||
// return item;
|
||||
// })
|
||||
// : [];
|
||||
|
||||
// return {
|
||||
// ...prev,
|
||||
// [selTagKey]: updatedArray,
|
||||
// };
|
||||
// });
|
||||
// } else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
|
||||
// if (!signClient) {
|
||||
// setDroppedItems((prev) => {
|
||||
|
||||
// const updatedItems = Array.isArray(prev[selTagKey])
|
||||
// ? prev[selTagKey].map((item, i) =>
|
||||
// i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
// )
|
||||
// : [];
|
||||
|
||||
// return {
|
||||
// ...prev,
|
||||
// [selTagKey]: updatedItems,
|
||||
// };
|
||||
// });
|
||||
// } else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => {
|
||||
|
||||
|
|
@ -248,14 +119,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
};
|
||||
});
|
||||
} else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
setDroppedItems((prev) => {
|
||||
return (prev.map((item, idx) => {
|
||||
console.log(prev, "Prev lIne 258")
|
||||
if (idx === selTagIndx) {
|
||||
return { ...item, [changeTo]: changeWith, update: true }
|
||||
}
|
||||
|
|
@ -267,22 +132,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
setDropDownToggle(null)
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
|
||||
|
||||
// if (selectedTag.dateFormat === TEMPORAL.DATE) {
|
||||
// handlePropertyChange("format", dateFormats[0].format)
|
||||
// }
|
||||
// else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
|
||||
// handlePropertyChange("format", dateTimeFormats[0].format)
|
||||
// }
|
||||
// else if (selectedTag.dateFormat === TEMPORAL.TIME) {
|
||||
// handlePropertyChange("format", timeFormats[0].format)
|
||||
// }
|
||||
// }
|
||||
// }, [selectedTag.dateFormat])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
|
||||
handlePropertyChange("dateFormat", TEMPORAL.DATE);
|
||||
|
|
@ -292,7 +141,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
|
||||
handlePropertyChange("multiLine", true);
|
||||
}
|
||||
}, [])
|
||||
}, [selectedTag])
|
||||
|
||||
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = Number(e.target.value)
|
||||
|
|
@ -306,24 +155,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
setDecimalPlace(selectedTag.decimalPlace ?? 0)
|
||||
}, [selectedTag.decimalPlace ?? 0])
|
||||
|
||||
// useEffect(() => {
|
||||
// if ("styles" in selectedTag) {
|
||||
// console.log("styles" in selectedTag)
|
||||
// const fontSize = selectedTag?.styles?.textSize;
|
||||
// const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
// console.log(fontSize)
|
||||
|
||||
// if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.PARAGRAPH && tagHeight > (fontSize + fontSize)) {
|
||||
// handlePropertyChange("subType", TEXT.PARAGRAPH)
|
||||
// } else if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.SINGLE_LINE && tagHeight <= (fontSize + fontSize)) {
|
||||
// console.log("Change subType Called from elseif")
|
||||
// handlePropertyChange("subType", TEXT.SINGLE_LINE)
|
||||
// }
|
||||
// }
|
||||
// }, [selectedTag])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedTag) return;
|
||||
|
||||
|
|
@ -334,26 +165,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
setStyles({ ...defaultStyles, ...selectedTag.styles });
|
||||
}
|
||||
|
||||
// Optional subType logic
|
||||
|
||||
// const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
|
||||
// const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
// if (
|
||||
// selectedTag.type === TagsTypes.TEXT &&
|
||||
// selectedTag.subType !== TEXT.PASSWORD &&
|
||||
// selectedTag.subType !== TEXT.PARAGRAPH &&
|
||||
// tagHeight > fontSize * 2
|
||||
// ) {
|
||||
// handlePropertyChange("subType", TEXT.PARAGRAPH);
|
||||
// } else if (
|
||||
// selectedTag.subType !== TEXT.PASSWORD &&
|
||||
// selectedTag.subType !== TEXT.SINGLE_LINE &&
|
||||
// tagHeight <= fontSize * 2
|
||||
// ) {
|
||||
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
|
||||
// }
|
||||
|
||||
}, [selectedTag]);
|
||||
|
||||
const handleStyleChange = (key, value) => {
|
||||
|
|
@ -469,41 +280,32 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
className: ''
|
||||
}
|
||||
|
||||
|
||||
console.log(selectedType, "line 434");
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Right Side Bar Start */}
|
||||
<div className='col-span-2 w-full h-full bg-white text-sm overflow-y-auto'>
|
||||
<p className="p-2 font-semibold text-md">Properties</p>
|
||||
<p className="p-2 font-semibold text-md"><span className="capitalize">{selectedTag.type.toLowerCase()}</span> Attributes:</p>
|
||||
<hr className="text-slate-200" />
|
||||
|
||||
<div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
|
||||
|
||||
{
|
||||
<RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
|
||||
|
||||
{
|
||||
(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
|
||||
<RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{
|
||||
selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{selectedTag.label &&
|
||||
<LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
{(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
|
||||
|
||||
<>
|
||||
<RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
|
||||
</>
|
||||
|
||||
|
||||
}
|
||||
|
||||
{selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />}
|
||||
<ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
|
||||
|
||||
{
|
||||
selectedType && Object.keys(selectedType).length > 0 &&
|
||||
|
|
@ -527,6 +329,15 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{/* Mask Type */}
|
||||
{
|
||||
selectedTag.type.toLowerCase() === TagsTypes.TEXT &&
|
||||
<TextValueFIll
|
||||
value={selectedTag.value ?? ""}
|
||||
multiLine={selectedTag.multiLine ?? false}
|
||||
handlePropertyChange={handlePropertyChange}
|
||||
/>
|
||||
}
|
||||
|
||||
{/* TEMPORAL DATE FORMAT - START */}
|
||||
{
|
||||
|
|
@ -547,7 +358,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
{
|
||||
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Decimal Places</label>
|
||||
<label htmlFor="" className="font-medium">Decimal Places</label>
|
||||
<input
|
||||
type="number"
|
||||
onChange={(e) => handleDecimalPlace(e)}
|
||||
|
|
@ -572,16 +383,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
<MaxMinLenAttr maxLength={selectedTag.maxLength} minLength={selectedTag.minLength} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
{(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
|
||||
<div className="">
|
||||
<div className="flex items-center justify-between mr-2 cursor-pointer"
|
||||
onClick={() => setStyleOpen(!styleOpen)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2">Styles</label>
|
||||
className="block mb-2 font-medium">Styles</label>
|
||||
<IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
|
||||
</div>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar';
|
||||
import { DroppedItem, TagsTypes } from '../../../../utlity/types';
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from '../RightSideBar';
|
||||
import { DroppedItem, TagsTypes } from '../../../../../utlity/types';
|
||||
import { dateFormats, timeFormats } from '../../../../../utlity/dateTimeFormats';
|
||||
import { FaCommentsDollar } from 'react-icons/fa';
|
||||
|
||||
interface CommonAttrDropDownInt {
|
||||
selectedType: any;
|
||||
|
|
@ -17,8 +19,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
let subType = "";
|
||||
let subTypeKey = ""
|
||||
|
||||
console.log(selectedType, selectedTag, "line 20");
|
||||
|
||||
switch (selectedTag.type.toLowerCase()) {
|
||||
case "number":
|
||||
if (selectedTag.decimalPlace === undefined) {
|
||||
|
|
@ -36,7 +36,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
}
|
||||
break;
|
||||
case "text":
|
||||
console.log("Line 444", selectedTag);
|
||||
if (selectedTag.multiLine === undefined) {
|
||||
subType = TEXT.PARAGRAPH
|
||||
} else if (selectedTag.multiLine) {
|
||||
|
|
@ -73,11 +72,9 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
break;
|
||||
}
|
||||
|
||||
console.log(selectedTag, "line 63");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Type</label>
|
||||
<label htmlFor="" className="font-medium">Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
|
|
@ -90,9 +87,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{Object.keys(selectedType).map((val, indx) => {
|
||||
|
||||
|
||||
console.log(selectedType, val, "Line 90")
|
||||
|
||||
let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
|
||||
let isCurrency = false;
|
||||
let isPassword = false;
|
||||
|
|
@ -133,8 +127,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
}
|
||||
// Handling TEXT - END
|
||||
|
||||
console.log(subTypeKey, subType, value, "line 1223");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
|
|
@ -162,8 +154,27 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
|
||||
}
|
||||
handlePropertyChange(subTypeKey, value as boolean);
|
||||
} else if (selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL) {
|
||||
handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
|
||||
if (subTypeKey === "dateFormat") {
|
||||
let format = null;
|
||||
switch (value) {
|
||||
case "date":
|
||||
format = dateFormats[0].format;
|
||||
break;
|
||||
case "time":
|
||||
format = timeFormats[0].format;
|
||||
break;
|
||||
case "date_time":
|
||||
format = dateFormats[0].format + " " + timeFormats[0].format;
|
||||
break;
|
||||
default:
|
||||
format = dateFormats[0].format;
|
||||
}
|
||||
else {
|
||||
|
||||
handlePropertyChange("format", format as string);
|
||||
}
|
||||
} else {
|
||||
handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
|
||||
}
|
||||
}}
|
||||
|
|
@ -17,9 +17,9 @@ const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropert
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-left items-center gap-1.5 mt-0.5">
|
||||
<div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
|
||||
<label
|
||||
className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
|
||||
className="text-slate-600 transitions-all duration-150 font-medium"
|
||||
htmlFor="use_current_timestamp"
|
||||
>
|
||||
Use Current Timestamp
|
||||
|
|
@ -73,24 +73,27 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (disabled) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
case 'ArrowDown':
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
|
||||
break;
|
||||
}
|
||||
};
|
||||
// Move ON Key Down - START
|
||||
// useEffect(() => {
|
||||
// const handleKeyDown = (event: KeyboardEvent) => {
|
||||
// if (disabled) return;
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [disabled, stepSize]);
|
||||
// switch (event.key) {
|
||||
// case 'ArrowUp':
|
||||
// case 'ArrowDown':
|
||||
// case 'ArrowLeft':
|
||||
// case 'ArrowRight':
|
||||
// event.preventDefault();
|
||||
// handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
|
||||
// break;
|
||||
// }
|
||||
// };
|
||||
|
||||
// window.addEventListener('keydown', handleKeyDown);
|
||||
// return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
// }, [disabled, stepSize]);
|
||||
// Move ON Key Down - END
|
||||
|
||||
const buttonClass = `
|
||||
w-8 h-8 flex items-center justify-center rounded-full border shadow-sm text-[12px]
|
||||
|
|
@ -124,7 +127,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
<input
|
||||
type="number"
|
||||
value={leftValue}
|
||||
onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
|
||||
onChange={(e) => { e.preventDefault; handlePositionInputChange('left', e.target.value) }}
|
||||
onBlur={() => handlePositionInputBlur('left')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'left')}
|
||||
disabled={disabled}
|
||||
|
|
@ -134,7 +137,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
<input
|
||||
type="number"
|
||||
value={topValue}
|
||||
onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
|
||||
onChange={(e) => { e.preventDefault; handlePositionInputChange('top', e.target.value) }}
|
||||
onBlur={() => handlePositionInputBlur('top')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'top')}
|
||||
disabled={disabled}
|
||||
|
|
@ -148,83 +151,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
|
||||
<FaArrowDown />
|
||||
</button>
|
||||
{/* Middle Row: Left - Center (Inputs) - Right */}
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Left Button */}
|
||||
{/* <div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('left')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move left"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowLeft size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Left</span>
|
||||
</div> */}
|
||||
|
||||
{/* Center Panel */}
|
||||
<div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24 ">
|
||||
{/* Floating dimensions tooltip */}
|
||||
{/* <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-[1px] text-[10px] font-mono text-black z-10 rounded-sm flex items-center gap-[2px]">
|
||||
<input
|
||||
type="number"
|
||||
value={leftValue}
|
||||
onChange={(e) => handlePositionInputChange('left', e.target.value)}
|
||||
onBlur={() => handlePositionInputBlur('left')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'left')}
|
||||
disabled={disabled}
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
/>
|
||||
<span className="mx-[1px]">×</span>
|
||||
<input
|
||||
type="number"
|
||||
value={topValue}
|
||||
onChange={(e) => handlePositionInputChange('top', e.target.value)}
|
||||
onBlur={() => handlePositionInputBlur('top')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'top')}
|
||||
disabled={disabled}
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Right Button */}
|
||||
{/* <div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('right')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move right"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowRight size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Right</span>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Bottom Button */}
|
||||
{/* <div className="flex justify-center me-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('down')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move down"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowDown size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Bottom</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
|
||||
interface LabelAttrInt {
|
||||
label: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className='font-medium'>Label</label>
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
||||
type="text"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default LabelAttr
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "./RightSideBar";
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "../RightSideBar";
|
||||
import { LuAsterisk } from "react-icons/lu";
|
||||
import { GoDotFill } from "react-icons/go";
|
||||
import { IoClose } from "react-icons/io5";
|
||||
|
|
@ -39,8 +39,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
|
|||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="maxLength">Max Length</label>
|
||||
<div className="flex flex-col">
|
||||
<label className="font-medium" htmlFor="maxLength">Max Length</label>
|
||||
<input
|
||||
id="maxLength"
|
||||
value={maxLength}
|
||||
|
|
@ -50,8 +50,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
|
|||
onChange={handleMaxChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="minLength">Min Length</label>
|
||||
<div className="flex flex-col">
|
||||
<label className="font-medium" htmlFor="minLength">Min Length</label>
|
||||
<input
|
||||
id="minLength"
|
||||
value={minLength}
|
||||
|
|
@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
|
|||
import { IoCheckmark } from 'react-icons/io5';
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '../../../../store/store';
|
||||
import { RootState } from '../../../../../store/store';
|
||||
import { recipientType } from '../../../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
|
||||
interface SelectedRecipientsIntr {
|
||||
|
|
@ -67,6 +68,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
|
|||
<div
|
||||
className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
|
||||
{selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
|
||||
if (recipient.type === recipientType.CC) return null; // Skip CC recipients
|
||||
return (<div
|
||||
key={indx}
|
||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
||||
|
|
@ -7,8 +7,8 @@ interface RequiredAttrInt {
|
|||
|
||||
const RequiredAttr : React.FC<RequiredAttrInt> = ({required, handlePropertyChange}) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center">
|
||||
<label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
|
||||
<div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
|
||||
<label htmlFor="required" className="text-slate-600 transitions-all duration-150 font-medium">Required</label>
|
||||
<input
|
||||
id="required"
|
||||
checked={required ? required : false}
|
||||
|
|
@ -52,7 +52,6 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
};
|
||||
}
|
||||
|
||||
console.log("New droppedItems state:", newState);
|
||||
return newState;
|
||||
});
|
||||
}
|
||||
|
|
@ -94,7 +93,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
return (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="" className="">Add Options</label>
|
||||
<label htmlFor="" className="font-medium">Add Options</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
|
||||
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
|
||||
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../../utlity/dateTimeFormats";
|
||||
import { DROPDOWNTOGGLE, TEMPORAL } from "../RightSideBar";
|
||||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import dayjs from "dayjs";
|
||||
import { DroppedItem } from "../../../../utlity/types";
|
||||
import { DroppedItem } from "../../../../../utlity/types";
|
||||
|
||||
const dateTimeFormatMap = {
|
||||
"date": dateFormats,
|
||||
|
|
@ -25,20 +25,29 @@ interface TemporalDateAttrInt {
|
|||
|
||||
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
|
||||
console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
|
||||
let is24HourFormat = true
|
||||
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
||||
if (selectedTag.format && selectedTag.format.split(/hh|mm/).length > 0) {
|
||||
if ((selectedTag.format.split(/:mm/)[0]).at(-1) === "h") {
|
||||
is24HourFormat = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(is24HourFormat);
|
||||
|
||||
const handleIs24HrsClick = (checked: boolean) => {
|
||||
if (dateFormat === TEMPORAL.TIME) {
|
||||
if (!checked) {
|
||||
handlePropertyChange("format", timeFormats[1].format, is24Hrs)
|
||||
handlePropertyChange("format", timeFormats[1].format, !is24Hrs)
|
||||
} else {
|
||||
handlePropertyChange("format", timeFormats[0].format, is24Hrs)
|
||||
}
|
||||
}
|
||||
else if (dateFormat === TEMPORAL.DATE_TIME) {
|
||||
handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
|
||||
const timeFormat = format = timeFormats[checked ? 0 : 1].format;
|
||||
const dateFormat = selectedTag.format && selectedTag.format.split(/hh|HH/)[0]
|
||||
handlePropertyChange("format", dateFormat+" "+timeFormat, checked ? is24Hrs : !is24Hrs)
|
||||
}
|
||||
setIs24Hrs(checked)
|
||||
}
|
||||
|
|
@ -54,7 +63,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
|
|||
return (
|
||||
<div>
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
<label htmlFor="" className="font-medium">Formats</label>
|
||||
{(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
|
|
@ -87,12 +96,12 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
|
|||
let val = valObj["format"]
|
||||
if (dateFormat === TEMPORAL.DATE_TIME) {
|
||||
if (is24Hrs) {
|
||||
val = val + " " + timeFormats[0].format;
|
||||
val = val+" "+timeFormats[0].format;
|
||||
} else {
|
||||
val = val + " " + timeFormats[1].format;
|
||||
val = val+" "+timeFormats[1].format;
|
||||
}
|
||||
}
|
||||
console.log('line 89', val)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
interface TextValueFIllProps {
|
||||
value: string | number;
|
||||
multiLine: boolean;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const TextValueFIll: React.FC<TextValueFIllProps> = ({ value = "", multiLine, handlePropertyChange }) => {
|
||||
const [textValue, setTextValue] = useState<string | number>(value);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="textValue">Value</label>
|
||||
{multiLine ?
|
||||
<textarea
|
||||
onBlur={() => handlePropertyChange("value", textValue)}
|
||||
id="textValue"
|
||||
value={textValue}
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
onChange={e => setTextValue(e.target.value)}
|
||||
></textarea>
|
||||
: <input
|
||||
onBlur={() => handlePropertyChange("value", textValue)}
|
||||
id="textValue"
|
||||
value={textValue}
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
onChange={e => setTextValue(e.target.value)}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextValueFIll
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
|
||||
interface ToolTipAttrInt {
|
||||
tooltip: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const ToolTipAttr: React.FC<ToolTipAttrInt> = ({ tooltip, handlePropertyChange }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className='font-medium'>ToolTip</label>
|
||||
<input
|
||||
value={tooltip}
|
||||
onChange={(e) => handlePropertyChange('tooltip', e.target.value)}
|
||||
type="text"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToolTipAttr
|
||||
|
|
@ -4,8 +4,6 @@ import { useParams } from 'react-router-dom'
|
|||
const PageGuard = () => {
|
||||
const allowedPages = ["settings", "contacts"]
|
||||
|
||||
console.log("Allowed Pages: ", allowedPages)
|
||||
|
||||
const {page1} = useParams<{page1: string}>()
|
||||
if (page1 && !allowedPages.includes(page1)) {
|
||||
return <div>Access Denied</div>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,7 @@ interface AccountOption {
|
|||
|
||||
const Setting = () => {
|
||||
const { page1 } = useParams<{ page1: string }>();
|
||||
console.log("page1", page1)
|
||||
const location = useLocation();
|
||||
console.log("location", location)
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
|
|
@ -310,7 +308,6 @@ const Setting = () => {
|
|||
// Set initial subsection when component mounts or activeTab changes
|
||||
useEffect(() => {
|
||||
const subSections = getSubSections(activeTab);
|
||||
console.log("subSections", subSections)
|
||||
const hash = location.hash.replace('#', '');
|
||||
|
||||
if (subSections.length > 0) {
|
||||
|
|
@ -345,23 +342,19 @@ const Setting = () => {
|
|||
let res;
|
||||
let toastMesaage;
|
||||
if (action === 'create') {
|
||||
console.log('Creating account:', data);
|
||||
const payloadAccount = {
|
||||
name: data.accountName
|
||||
}
|
||||
res = await api.post(`/api/user/accounts`, payloadAccount)
|
||||
console.log("resAccountName", res)
|
||||
if (res.status === 201) {
|
||||
toastMesaage = `${action.toUpperCase()} Created Successfull...!`
|
||||
}
|
||||
} else if (action === 'invite') {
|
||||
console.log('Inviting user:', data);
|
||||
const payloadInvite = {
|
||||
email: data.email,
|
||||
role: data.role
|
||||
}
|
||||
res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
|
||||
console.log("InviteNAme", res)
|
||||
toastMesaage = "Invite Successfull...!"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
getAllSignatures,
|
||||
editingSignature
|
||||
}) => {
|
||||
console.log("editingSignature", editingSignature)
|
||||
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
|
|
@ -82,8 +81,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
console.log("selectedSignature", selectedSignature)
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
|
@ -119,7 +116,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
useEffect(() => {
|
||||
if (editingSignature) {
|
||||
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
|
||||
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
|
||||
setInitials((`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`).toUpperCase());
|
||||
setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
|
||||
|
||||
// Set font for SELECT tab
|
||||
|
|
@ -230,8 +227,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
payload.initialsBase64 = signatures.initials;
|
||||
}
|
||||
|
||||
console.log("payload214", payload);
|
||||
|
||||
let res;
|
||||
if (isEditMode && editingSignature) {
|
||||
// Update existing signature
|
||||
|
|
@ -240,7 +235,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
signatureId: editingSignature.id
|
||||
};
|
||||
res = await api.put(`/api/user/signatures`, updatePayload);
|
||||
console.log("handleUpdate", res);
|
||||
|
||||
toast.success("Signature Updated Successfully", {
|
||||
position: "top-center",
|
||||
|
|
@ -256,7 +250,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
} else {
|
||||
// Create new signature
|
||||
res = await api.post(`/api/user/signatures`, payload);
|
||||
console.log("handleSubmit", res);
|
||||
|
||||
toast.success("Signature Created Successfully", {
|
||||
position: "top-center",
|
||||
|
|
@ -451,7 +444,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
|
||||
let currUser = res?.data;
|
||||
setUser(currUser);
|
||||
|
||||
|
|
@ -564,7 +557,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
>
|
||||
{checked && <FiCheck className="text-white text-xs" />}
|
||||
</div>
|
||||
<span>Signature will be used by default</span>
|
||||
<span>Save as default signature</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -686,7 +679,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
>
|
||||
{checked && <FiCheck className="text-white text-xs" />}
|
||||
</div>
|
||||
<span>Signature will be used by default</span>
|
||||
<span>Save as default signature</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ const SignatureManager: React.FC = () => {
|
|||
setLoading(true)
|
||||
try {
|
||||
let res = await api.get("/api/user/signatures")
|
||||
console.log("getAllSignatures", res.data)
|
||||
let signatureData = res?.data
|
||||
setSignatures(signatureData)
|
||||
} catch (error) {
|
||||
|
|
@ -58,9 +57,7 @@ const SignatureManager: React.FC = () => {
|
|||
}, [])
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
console.log('Edit signature:', id);
|
||||
let editSignature = signatures.find((item) => item.id === id);
|
||||
console.log("editSignature", editSignature);
|
||||
|
||||
if (editSignature) {
|
||||
setEditingSignature(editSignature);
|
||||
|
|
@ -74,7 +71,7 @@ const SignatureManager: React.FC = () => {
|
|||
setLoading(true)
|
||||
try {
|
||||
let res = await api.delete(`/api/user/signatures/${id}`)
|
||||
console.log(res.data)
|
||||
|
||||
toast.success("Signature Delete Successfull", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
|
|
@ -115,8 +112,6 @@ const SignatureManager: React.FC = () => {
|
|||
|
||||
const selectedFont = signatureOptions.find(opt => opt.style === font);
|
||||
const fontClass = `${selectedFont?.style || 'print'}`;
|
||||
console.log("fontClass",fontClass)
|
||||
|
||||
|
||||
if (mode === 'initials') {
|
||||
const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
signTagId
|
||||
}) => {
|
||||
|
||||
console.log("savedModal", recipient)
|
||||
const [activeTab, setActiveTab] = useState<'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED'>('TYPED');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
|
|
@ -120,8 +119,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
},
|
||||
});
|
||||
|
||||
console.log("User data", user)
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
|
@ -172,7 +169,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
signature: signatureBlob,
|
||||
initial: initialsBlob,
|
||||
});
|
||||
console.log("saved Called Line 174")
|
||||
}
|
||||
}
|
||||
setPreSaveSignatures(preSavedSignatures)
|
||||
|
|
@ -223,7 +219,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
console.log("handleSubmit Called")
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
setIsSubmitting(false);
|
||||
|
|
@ -243,7 +238,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
font: selectedSignature.style
|
||||
};
|
||||
|
||||
console.log("payload", payload)
|
||||
// if (isEditMode && editingSignature) {
|
||||
// // Update existing signature
|
||||
// const updatePayload = {
|
||||
|
|
@ -273,7 +267,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
"ngrok-skip-browser-warning": "69420"
|
||||
}
|
||||
});
|
||||
console.log("handleSubmit", res);
|
||||
|
||||
toast.success("Signature Created Successfully", {
|
||||
position: "top-center",
|
||||
|
|
@ -532,7 +525,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
// let currUser = res?.data;
|
||||
setUser(recipient);
|
||||
setFullName(recipient.firstName + " " + recipient.lastName);
|
||||
setInitials(recipient.firstName.slice(0, 1) + recipient.lastName.slice(0, 1));
|
||||
setInitials((recipient.firstName.slice(0, 1) + recipient.lastName.slice(0, 1)).toUpperCase());
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ interface InitialConProps {
|
|||
const InitialCon: React.FC<InitialConProps> = ({ openInitial, setOpenInitial, savedInitial, setSavedInitial }) => {
|
||||
|
||||
const handleSaveInitial = (signatureDataUrl: string) => {
|
||||
console.log(signatureDataUrl, "savedInitial ------ 123");
|
||||
setSavedInitial(signatureDataUrl);
|
||||
setOpenInitial(false)
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ interface SignatureConProps {
|
|||
const SignatureCon: React.FC<SignatureConProps> = ({ recipientId, openSign, setOpenSign, savedSignature, setSavedSignature }) => {
|
||||
|
||||
const handleSaveSignature = (signatureDataUrl: string) => {
|
||||
console.log('Signature saved:', signatureDataUrl);
|
||||
axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/signature?recipientId=${recipientId}`,
|
||||
{
|
||||
signature: signatureDataUrl,
|
||||
|
|
@ -23,9 +22,7 @@ const SignatureCon: React.FC<SignatureConProps> = ({ recipientId, openSign, setO
|
|||
},
|
||||
{ headers: { "ngrok-skip-browser-warning": "69420", } })
|
||||
.then((res) => {
|
||||
console.log(res, "Signature saved response")
|
||||
if (res.status === 200 || res.status === 201) {
|
||||
console.log('Signature saved successfully');
|
||||
setSavedSignature(signatureDataUrl);
|
||||
setOpenSign(false)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,6 @@ interface StampUploadType {
|
|||
|
||||
const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
|
||||
|
||||
console.log(stamp, "stamp upload component");
|
||||
|
||||
|
||||
// const [preview, setStamp] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
|
|
@ -23,7 +20,6 @@ const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
|
|||
|
||||
reader.onload = () => {
|
||||
if (typeof reader.result === 'string') {
|
||||
console.log(reader.result, "reader result");
|
||||
setStamp((prev) => {
|
||||
return (
|
||||
{
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const TemplateTable = () => {
|
|||
templateId: item.id,
|
||||
};
|
||||
let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
|
||||
console.log("handleUseClick", res.data)
|
||||
|
||||
// /process-step-one/:accountId/:transactionId
|
||||
navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
|
||||
} catch (error) {
|
||||
|
|
@ -220,7 +220,6 @@ const TemplateTable = () => {
|
|||
<button
|
||||
onMouseDown={() => {
|
||||
setShowMenu(null);
|
||||
console.log('Delete clicked', item);
|
||||
}}
|
||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ const Templates = () => {
|
|||
|
||||
|
||||
const handleAddTemplate = async () => {
|
||||
console.log("handleAddTemplate called");
|
||||
try {
|
||||
const res = await api.post(`/api/accounts/${activeAccountId}/templates`);
|
||||
navigate(`/process-step-one/${activeAccountId}/template/${res.data.id}`)
|
||||
|
|
|
|||
|
|
@ -149,7 +149,6 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
|
||||
'EDITED': <FiEdit className="w-4 h-4" />,
|
||||
};
|
||||
console.log("getActionIcons", action || <FiActivity className="w-4 h-4" />)
|
||||
return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -77,8 +77,6 @@ const TransactionView = () => {
|
|||
setIsModalOpen(false); // update state immediately
|
||||
};
|
||||
|
||||
console.log(transactionDetails, "line 37");
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [res1, res2] = await Promise.all([api.get(`/api/accounts/${accountId}/transactions/${transactionId}`),
|
||||
|
|
|
|||
|
|
@ -43,18 +43,14 @@ const DocView = () => {
|
|||
|
||||
function zoom(percentage: number, contentClass: string) {
|
||||
|
||||
console.log("calling zoom function", percentage, contentClass);
|
||||
|
||||
const content = document.querySelector(`.${contentClass}`);
|
||||
const scale = percentage // 100;
|
||||
if(content) {
|
||||
console.log("calling zoom function Printing Content", content);
|
||||
content.style.transform = `scale(${scale})`;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Calling useEffect for zoom", fitObj[selFitIndx].value);
|
||||
let indx = fitObj[selFitIndx].value
|
||||
if (indx === "FIT") {
|
||||
indx = "100";
|
||||
|
|
@ -62,8 +58,6 @@ const DocView = () => {
|
|||
zoom(Number(indx), 'zoom-con')
|
||||
}, [selFitIndx])
|
||||
|
||||
console.log(isFitDd);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,6 @@ export const createAxiosInstance = () => {
|
|||
const user = JSON.parse(parsedRoot.user);
|
||||
const accessToken = user.accessToken;
|
||||
|
||||
console.log(accessToken, "accessToken");
|
||||
|
||||
return axios.create({
|
||||
baseURL: import.meta.env.VITE_BASE_URI,
|
||||
withCredentials: true,
|
||||
|
|
|
|||
|
|
@ -1,166 +1,3 @@
|
|||
// import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
// // import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
// import { hideLoader, showLoader } from "./loaderSlice";
|
||||
// // import { showModal } from "./modalSlice";
|
||||
// // import { updateSelectedDocuments } from "./selectedDocsSlice";
|
||||
|
||||
// import api from "../../config/api";
|
||||
// import { Bounce, toast } from "react-toastify";
|
||||
// // import { createAxiosInstance } from "../../config/axiosInstance";
|
||||
|
||||
// // const axiosInstance = createAxiosInstance();
|
||||
|
||||
// export interface Document {
|
||||
// id: string;
|
||||
// name: string;
|
||||
// extension: string;
|
||||
// original?: boolean;
|
||||
// corrupted?: boolean;
|
||||
// isCompleted: boolean;
|
||||
// status: string;
|
||||
// }
|
||||
|
||||
// export interface DocumentState {
|
||||
// documents: Document[];
|
||||
// loading: boolean;
|
||||
// error: string | null;
|
||||
// }
|
||||
|
||||
// const initialState: DocumentState = {
|
||||
// documents: [],
|
||||
// loading: false,
|
||||
// error: null,
|
||||
// };
|
||||
|
||||
// interface uploadArgs {
|
||||
// formData: FormData;
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// }
|
||||
|
||||
|
||||
// // Fetch documents from API
|
||||
// export const fetchDocuments = createAsyncThunk<Document[], { accountId: string, transactionId: string }>(
|
||||
// "documents/fetchDocuments",
|
||||
// async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
|
||||
// try {
|
||||
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`);
|
||||
// return response.data as Document[];
|
||||
// } catch (error: any) {
|
||||
// // if(error.status === 401) {}
|
||||
// return rejectWithValue(error.response?.data || "Failed to fetch documents");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// // Upload multiple documents using FormData (Key: "document")
|
||||
// export const uploadDocuments = createAsyncThunk<Document[], uploadArgs>(
|
||||
// "documents/uploadDocuments",
|
||||
// async ({ formData, accountId, transactionId }, { dispatch, rejectWithValue }) => {
|
||||
// try {
|
||||
// dispatch(showLoader("Uploading documents..."));
|
||||
// console.log("Form Data", formData.getAll("document"))
|
||||
|
||||
// const response = await api.post(`/api/accounts/${accountId}/transactions/${transactionId}/documents`, formData, {
|
||||
// headers: {
|
||||
// "Content-Type": "multipart/form-data"
|
||||
// },
|
||||
// });
|
||||
|
||||
// console.log("Form Uploaded Response DocumentSlice Line 185", response.data)
|
||||
|
||||
// dispatch(hideLoader());
|
||||
// return [response.data];
|
||||
// } catch (error: any) {
|
||||
// dispatch(hideLoader());
|
||||
// toast.error("Error Uploading Document", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 3000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: false,
|
||||
// draggable: false,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// transition: Bounce,
|
||||
// });
|
||||
|
||||
// console.log("Failed Uploading Documents")
|
||||
// throw new Error("Failed Uploading Documents")
|
||||
|
||||
// // Mock data in case of failure
|
||||
// // const failedDocuments = formData.getAll("document").map((file: any) => ({
|
||||
// // id: uuidv4(),
|
||||
// // name: file.name,
|
||||
// // extension: file.name.split(".").pop() || "unknown",
|
||||
// // original: Math.random() < 0.5,
|
||||
// // corrupted: Math.random() < 0.5,
|
||||
// // }));
|
||||
|
||||
// // dispatch(updateSelectedDocuments({ documents: failedDocuments }));
|
||||
// // return failedDocuments; // Instead of rejecting, return mock data
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// const documentSlice = createSlice({
|
||||
// name: "documents",
|
||||
// initialState,
|
||||
// reducers: {
|
||||
// setDocuments: (state, action: PayloadAction<Document[]>) => {
|
||||
// state.documents = action.payload;
|
||||
// },
|
||||
// setDocProgComplete: (state, action: PayloadAction<string>) => {
|
||||
// const docIndex = state.documents.findIndex(doc => doc.id === action.payload);
|
||||
// if (docIndex !== -1) {
|
||||
// state.documents[docIndex].isCompleted = true;
|
||||
// }
|
||||
// },
|
||||
// resetDocuments: (state) => {
|
||||
// state.documents = [];
|
||||
// },
|
||||
// deleteDocument: (state, action: PayloadAction<string>) => {
|
||||
// state.documents = state.documents.filter(doc => doc.id !== action.payload);
|
||||
// },
|
||||
// },
|
||||
// extraReducers: (builder) => {
|
||||
// builder
|
||||
// // Fetch documents
|
||||
// .addCase(fetchDocuments.pending, (state) => {
|
||||
// state.loading = true;
|
||||
// state.error = null;
|
||||
// })
|
||||
// .addCase(fetchDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
// state.loading = false;
|
||||
// state.documents = action.payload;
|
||||
// })
|
||||
// .addCase(fetchDocuments.rejected, (state, action) => {
|
||||
// state.loading = false;
|
||||
// state.error = action.payload as string;
|
||||
// })
|
||||
|
||||
// // Upload multiple documents
|
||||
// .addCase(uploadDocuments.pending, (state) => {
|
||||
// state.loading = true;
|
||||
// state.error = null;
|
||||
// })
|
||||
// .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
// state.loading = false;
|
||||
// state.documents = [...action.payload, ...state.documents];
|
||||
// })
|
||||
// .addCase(uploadDocuments.rejected, (state, action) => {
|
||||
// state.loading = false;
|
||||
// state.error = action.payload as string;
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
|
||||
// export const { resetDocuments, setDocuments, setDocProgComplete, deleteDocument } = documentSlice.actions;
|
||||
// export default documentSlice.reducer;
|
||||
|
||||
|
||||
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { toast, Bounce } from 'react-toastify';
|
||||
import api from '../../config/api';
|
||||
|
|
@ -244,21 +81,29 @@ export const uploadDocuments = createAsyncThunk<
|
|||
};
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
|
||||
console.log(`/api/accounts/${accountId}/${toggle}/${transactionId}/documents`)
|
||||
let response = [];
|
||||
// debugger
|
||||
for (let i = 0; i < formData.getAll("file").length; i++) {
|
||||
const file = new FormData();
|
||||
file.append("file", formData.getAll("file")[i]);
|
||||
|
||||
const response = await api.post(
|
||||
const res = await api.post(
|
||||
`/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
|
||||
formData,
|
||||
file,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("// await sleep(5000);", response.data)
|
||||
|
||||
console.log(res.data);
|
||||
response.push(res.data);
|
||||
}
|
||||
|
||||
// await sleep(5000);
|
||||
dispatch(hideLoader());
|
||||
return [response.data];
|
||||
return [...response];
|
||||
} catch (error: any) {
|
||||
dispatch(hideLoader());
|
||||
|
||||
|
|
@ -326,7 +171,9 @@ const documentsSlice = createSlice({
|
|||
})
|
||||
.addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
state.loading = false;
|
||||
state.documents.push(...action.payload);
|
||||
action.payload.forEach((doc, indx) => {
|
||||
state.documents.push(doc);
|
||||
});
|
||||
})
|
||||
.addCase(uploadDocuments.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
|
|
|
|||
|
|
@ -55,10 +55,6 @@ export const updateSelectedDocuments = createAsyncThunk<
|
|||
"selectedDocuments/updateSelectedDocuments",
|
||||
async ({ documents }, { rejectWithValue }) => {
|
||||
try {
|
||||
|
||||
|
||||
console.log(documents, "From Selected Documents")
|
||||
|
||||
// await axiosInstance.post("/selected-documents",
|
||||
// { documents }
|
||||
// );
|
||||
|
|
|
|||
|
|
@ -1,335 +1,3 @@
|
|||
// import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
// import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||
// import { toast } from 'react-toastify';
|
||||
// import colors from '../../utlity/colorsArr';
|
||||
// import api from '../../config/api';
|
||||
|
||||
|
||||
|
||||
// export enum recipientType {
|
||||
// SIGNER = "Signer",
|
||||
// INPERSONSIGNER = "InPersonSigner",
|
||||
// CC = "CC"
|
||||
// }
|
||||
|
||||
// export interface Recipient {
|
||||
// id?: string;
|
||||
// firstName: string;
|
||||
// lastName: string;
|
||||
// routingOrder: number;
|
||||
// email: string;
|
||||
// hostName: string;
|
||||
// hostEmail: string;
|
||||
// type: recipientType;
|
||||
// color?: string;
|
||||
// }
|
||||
|
||||
// export interface SelectedRecipientInt {
|
||||
// recipients: Recipient[],
|
||||
// signingOrder: boolean,
|
||||
// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE
|
||||
// }
|
||||
|
||||
// interface AddRecipientArgs {
|
||||
// recipientsData: Recipient[];
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// }
|
||||
|
||||
// export enum TRANSACTION_TEMPLATE_TOGGLE {
|
||||
// TRANSACTIONS = "transactions",
|
||||
// TEMPLATES = "templates"
|
||||
// }
|
||||
|
||||
// const initialState: SelectedRecipientInt = {
|
||||
// recipients: [],
|
||||
// signingOrder: false,
|
||||
// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS
|
||||
// };
|
||||
|
||||
// export const addRecipientAsync = createAsyncThunk<Recipient[], AddRecipientArgs>(
|
||||
// 'selectedRecipients/addRecipientAsync',
|
||||
// async ({ recipientsData, accountId, transactionId }, { rejectWithValue }) => {
|
||||
// console.log(recipientsData, accountId, transactionId, "recipientsData Line 46");
|
||||
// try {
|
||||
// console.log(recipientsData, "recipientsData --- Line 48");
|
||||
|
||||
// const updateRecipientsData = recipientsData.filter((recipient, idx) => recipient.id !== null);
|
||||
// const createRecipientsData = recipientsData.filter((recipient, idx) => recipient.id == null);
|
||||
|
||||
// console.log(updateRecipientsData, "updateRecipientsData Line 52");
|
||||
// console.log(createRecipientsData, "createRecipientsData Line 53");
|
||||
|
||||
// const resUpdate = await api.put(
|
||||
// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
|
||||
// updateRecipientsData
|
||||
// );
|
||||
|
||||
// const resCreate = await api.post(
|
||||
// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
|
||||
// createRecipientsData
|
||||
// );
|
||||
|
||||
// if (createRecipientsData.length === 0) resCreate.data = [];
|
||||
// if (updateRecipientsData.length === 0) resUpdate.data = [];
|
||||
|
||||
// console.log(resCreate, "resCreate");
|
||||
// console.log(resUpdate, "resUpdate");
|
||||
|
||||
// return [...resCreate.data, ...resUpdate.data] as Recipient[];
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue(err.response?.data || "Failed to add recipient");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// interface RemoveRecipientAsyncInterfaceObj {
|
||||
// id?: string;
|
||||
// email?: string;
|
||||
// }
|
||||
|
||||
// interface RemoveRecipientAsyncInterface {
|
||||
// recipientId: number | null;
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// email: string;
|
||||
// }
|
||||
|
||||
// export const removeRecipientAsync = createAsyncThunk<string | number, RemoveRecipientAsyncInterface>(
|
||||
// 'selectedRecipients/removeRecipientAsync',
|
||||
// async (obj, { rejectWithValue }) => {
|
||||
// try {
|
||||
// if (obj.recipientId) {
|
||||
// const res = await api.delete(`/api/accounts/${obj.accountId}/transactions/${obj.transactionId}/recipients/${obj.recipientId}`);
|
||||
// console.log(res, "Line 77")
|
||||
// return obj.recipientId;
|
||||
// }
|
||||
// return obj.email
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue("Failed to remove recipient");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// export const fetchRecipients = createAsyncThunk<Recipient[], { accountId: string, transactionId: string }>(
|
||||
// 'selectedRecipients/fetchRecipients',
|
||||
// async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
// try {
|
||||
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`);
|
||||
// return response.data as Recipient[];
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue(err.response?.data || "Failed to fetch recipients");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// const selectedRecipientsSlice = createSlice({
|
||||
// name: 'selectedRecipients',
|
||||
// initialState,
|
||||
// reducers: {
|
||||
// // Add a single recipient
|
||||
// addRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
// for (const recipient of state.recipients) {
|
||||
// if (recipient.email === action.payload.email) {
|
||||
// toast.dismiss();
|
||||
// toast.error("Email already exists !", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// return state;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Adding Recipient on top if type is inPersonSigner
|
||||
// console.log("Getting Type ", action.payload.type)
|
||||
// if (action.payload.type === recipientType.INPERSONSIGNER) {
|
||||
// state.signingOrder = true
|
||||
// state.recipients = [action.payload, ...state.recipients]
|
||||
// } else {
|
||||
// state.recipients.push(action.payload);
|
||||
// }
|
||||
|
||||
// },
|
||||
// resetRecipients: (state) => {
|
||||
// state.recipients = [];
|
||||
// },
|
||||
// toggleToTemplates: (state) => {
|
||||
// state.transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||
// },
|
||||
// // Replace the entire selectedRecipients array
|
||||
// setSelectedRecipients: (state, action: PayloadAction<Recipient[]>) => {
|
||||
// for (const [index, recipient] of action.payload.entries()) {
|
||||
// if ((recipient.type === recipientType.INPERSONSIGNER && index > 0) && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
|
||||
// return state;
|
||||
// }
|
||||
// }
|
||||
|
||||
// state.recipients = action.payload;
|
||||
// },
|
||||
// setSigningOrder: (state, action: PayloadAction<boolean>) => {
|
||||
|
||||
// for (const recipient of state.recipients) {
|
||||
// if (recipient.type === recipientType.INPERSONSIGNER) {
|
||||
// if (state.signingOrder) return state;
|
||||
// state.signingOrder = true;
|
||||
// return state
|
||||
// }
|
||||
// }
|
||||
|
||||
// state.signingOrder = action.payload;
|
||||
// },
|
||||
// // Remove Recipients
|
||||
// removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
// console.log("removeSelectedRecipient Called")
|
||||
// state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
|
||||
// },
|
||||
|
||||
// // Add Color in Recipient
|
||||
// addColorsToRecipient: (state) => {
|
||||
// // const colors = generateUniqueColors(state.recipients.length);
|
||||
// for (const [index, recipient] of state.recipients.entries()) {
|
||||
// console.log(state)
|
||||
// recipient.color = colors[index]
|
||||
// }
|
||||
// return state;
|
||||
// },
|
||||
// updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => {
|
||||
// console.log("recipient order called Line 159")
|
||||
// const { id, routingOrder } = action.payload;
|
||||
// const recipient = state.recipients.find((r) => r.id === id || r.email === id);
|
||||
// if (recipient) {
|
||||
// recipient.routingOrder = routingOrder;
|
||||
// }
|
||||
// },
|
||||
// updateRecipientIds: (state, action: PayloadAction<Recipient[]>) => {
|
||||
// console.log("updateRecipientIds", console.table(action.payload));
|
||||
// for (const recObj of state.recipients) {
|
||||
// const email = recObj.email
|
||||
// for (const recObj2 of action.payload) {
|
||||
// recObj.id = recObj2.id;
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// resetSelRecipient: (state) => {
|
||||
// state = initialState;
|
||||
// return state;
|
||||
// }
|
||||
// },
|
||||
// extraReducers: (builder) => {
|
||||
// builder
|
||||
// // Fetch Recipient - START
|
||||
// .addCase(fetchRecipients.pending, (state) => {
|
||||
// })
|
||||
// .addCase(fetchRecipients.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
// // console.log("Fetched recipients successfully:", action.payload);
|
||||
|
||||
// // Assign colors to recipients
|
||||
// const assignedRecipients = action.payload.map((recipient, index) => ({
|
||||
// ...recipient,
|
||||
// color: colors[index], // Cycle if more recipients than colors
|
||||
// }));
|
||||
|
||||
// state.recipients = assignedRecipients;
|
||||
// })
|
||||
// .addCase(fetchRecipients.rejected, (state, action) => {
|
||||
// console.error("Failed to fetch recipients:", action.payload);
|
||||
// toast.error("Failed to fetch recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Fetch Recipient - END
|
||||
|
||||
// // Add Recipient - START
|
||||
// .addCase(addRecipientAsync.pending, (state) => {
|
||||
|
||||
// })
|
||||
|
||||
|
||||
// .addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
// // Optionally avoid duplicates if needed
|
||||
|
||||
// console.log("addRecipientAsync Called Line 258", action.payload);
|
||||
// // const newRecipients = action.payload.filter(newRec => {
|
||||
// // return !state.recipients.some(existing => existing existing.id === newRec.id);
|
||||
// // });
|
||||
|
||||
// // const newRecipients = action.payload.filter(newRec => {
|
||||
// // return !state.recipients.some(existing => "id" in existing && existing.id === newRec.id);
|
||||
// // });
|
||||
|
||||
// // // Add new recipients and assign colors
|
||||
// // const startIndex = state.recipients.length;
|
||||
// // newRecipients.forEach((rec, index) => {
|
||||
// // rec.color = colors[startIndex + index];
|
||||
// // state.recipients.push(rec);
|
||||
// // });
|
||||
|
||||
// state.recipients = action.payload.map((recipient, index) => ({
|
||||
// ...recipient,
|
||||
// color: colors[index % colors.length], // Cycle through colors
|
||||
// }));
|
||||
|
||||
// })
|
||||
|
||||
|
||||
// .addCase(addRecipientAsync.rejected, (state, action) => {
|
||||
// console.error("Failed to fetch recipients:", action.payload);
|
||||
// toast.error("Failed to fetch recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Add Recipient - END
|
||||
|
||||
// // Fetch Recipient - START
|
||||
// .addCase(removeRecipientAsync.pending, (state) => {
|
||||
// })
|
||||
// .addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction<string | number>) => {
|
||||
// state.recipients = state.recipients.filter(
|
||||
// (recipient) => recipient.id !== action.payload && recipient.email !== action.payload
|
||||
// );
|
||||
// })
|
||||
// .addCase(removeRecipientAsync.rejected, (state, action) => {
|
||||
// console.error("Failed to Delete recipients:", action.payload);
|
||||
// toast.error("Failed to Delete recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Fetch Recipient - END
|
||||
// }
|
||||
// });
|
||||
|
||||
// export const { addRecipient, setSelectedRecipients, toggleToTemplates, removeSelectedRecipient, setSigningOrder, addColorsToRecipient, updateRecipientIds, resetSelRecipient, updateRecipientOrder, resetRecipients } = selectedRecipientsSlice.actions;
|
||||
// export default selectedRecipientsSlice.reducer;
|
||||
|
||||
|
||||
|
||||
import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { toast } from 'react-toastify';
|
||||
import colors from '../../utlity/colorsArr';
|
||||
|
|
@ -342,7 +10,7 @@ export enum recipientType {
|
|||
}
|
||||
|
||||
export interface Recipient {
|
||||
id?: string;
|
||||
id?: string | null;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
routingOrder: number;
|
||||
|
|
@ -356,7 +24,7 @@ export interface Recipient {
|
|||
roleName: string
|
||||
provideOwnTags?: boolean;
|
||||
uuid?: string;
|
||||
newOne: boolean;
|
||||
newOne?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectedRecipientInt {
|
||||
|
|
@ -405,8 +73,6 @@ export const addRecipientAsync = createAsyncThunk<
|
|||
const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
|
||||
const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
|
||||
|
||||
console.log("createRecipientsData", createRecipientsData)
|
||||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
|
||||
const resUpdate = updateRecipientsData.length
|
||||
|
|
@ -437,7 +103,6 @@ export const removeRecipientAsync = createAsyncThunk<
|
|||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
|
||||
console.log(`Line 440 : ${basePath}/${recipientId}`)
|
||||
// return
|
||||
if (recipientId) {
|
||||
await api.delete(`${basePath}/${recipientId}`);
|
||||
|
|
@ -467,9 +132,9 @@ export const fetchRecipients = createAsyncThunk<
|
|||
|
||||
let data = response.data as Recipient[];
|
||||
|
||||
data = data.filter((recipient, indx) => {
|
||||
return recipient.type !== "CC";
|
||||
})
|
||||
// data = data.filter((recipient, indx) => {
|
||||
// return recipient.type !== "CC";
|
||||
// })
|
||||
|
||||
if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
|
||||
window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
|
||||
|
|
@ -487,21 +152,6 @@ const selectedRecipientsSlice = createSlice({
|
|||
initialState,
|
||||
reducers: {
|
||||
addRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
|
||||
// Checking if meail already exist - START
|
||||
// for (const recipient of state.recipients) {
|
||||
// if (recipient.email === action.payload.email) {
|
||||
// toast.dismiss();
|
||||
// toast.error("Email already exists !", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// theme: "light",
|
||||
// });
|
||||
// return state;
|
||||
// }
|
||||
// }
|
||||
// Checking if meail already exist - END
|
||||
|
||||
if (action.payload.type === recipientType.INPERSONSIGNER) {
|
||||
state.signingOrder = true;
|
||||
state.recipients = [action.payload, ...state.recipients];
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ const transactionSlice = createSlice({
|
|||
reducers: {
|
||||
setTransactionId: (state, action: PayloadAction<string>) => {
|
||||
const transactionId = action.payload;
|
||||
console.log("Mic Check 2", transactionId)
|
||||
state.transactionId = transactionId;
|
||||
return state;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,12 +10,21 @@ const type_last_four = (str: string, changeWith: string): string => {
|
|||
};
|
||||
|
||||
const type_credit_card = (str: string, changeWith: string): string => {
|
||||
if (str.length !== 16) return str;
|
||||
// console.log(str.replace(/\d(?=\d{4})/g, "*"), "line 11", str)
|
||||
// return str.replace(/\d(?=\d{4})/g, `${changeWith}`);
|
||||
return `${changeWith.repeat(4)} ${changeWith.repeat(4)} ${changeWith.repeat(4)} ${str.slice(-4)}`
|
||||
if (str.length !== 15 && str.length !== 16) return str;
|
||||
|
||||
const last4 = str.slice(-4);
|
||||
const masked = str.slice(0, -4).replace(/\d/g, changeWith);
|
||||
|
||||
if (str.length === 16) {
|
||||
// Format: XXXX XXXX XXXX 1234
|
||||
return masked.slice(0, 4) + " " + masked.slice(4, 8) + " " + masked.slice(8, 12) + " " + last4;
|
||||
} else {
|
||||
// 15-digit (Amex): XXXX XXXXXX X1234
|
||||
return masked.slice(0, 4) + " " + masked.slice(4, 10) + " " + masked.slice(10, 11) + last4;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const type_national_insurance = (str: string, changeWith: string): string => {
|
||||
// str = str.slice(0, -1).replace(/[A-Za-z0-9]/g, "*") + str.slice(-1);
|
||||
// return str.replace(/\*/g, changeWith);
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
|
|||
const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
|
||||
const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
|
||||
|
||||
console.log("handleGroupBorderPosition")
|
||||
|
||||
if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
||||
borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
||||
borderTop.style.height = "1px";
|
||||
|
|
|
|||
|
|
@ -100,7 +100,6 @@ export interface TagsProperties {
|
|||
"isCurrency"?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export enum TagsTypes {
|
||||
TEXT = "text",
|
||||
SIGNATURE = "signature",
|
||||
|
|
@ -119,15 +118,11 @@ export enum TagsTypes {
|
|||
COMPANY = "company",
|
||||
}
|
||||
|
||||
|
||||
export enum SignTypeEnum {
|
||||
selfSign = "self_sign",
|
||||
multipleSign = "multi_sign"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export interface StylesInterface {
|
||||
font: string,
|
||||
italic: boolean,
|
||||
|
|
@ -137,7 +132,7 @@ export interface StylesInterface {
|
|||
textSize: number
|
||||
}
|
||||
|
||||
export interface TagOptionAttrType{
|
||||
export interface TagOptionAttrType {
|
||||
label: string;
|
||||
value: string;
|
||||
pageIndex?: number;
|
||||
|
|
@ -151,6 +146,7 @@ export interface DroppedItem {
|
|||
id?: string;
|
||||
icon: JSX.Element;
|
||||
label?: string;
|
||||
tooltip?: string;
|
||||
type: string;
|
||||
|
||||
// TagsProperties - Other Properties depend on tag type - START
|
||||
|
|
|
|||
Loading…
Reference in New Issue