check
This commit is contained in:
=bhagwanSingh
parent
68f0185c76
commit
5c12a25d51
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import axios from "axios"
|
||||
import { RootState } from "../../store/store";
|
||||
|
|
@ -154,6 +154,8 @@ const SignDocument = () => {
|
|||
const { recipientId } = useParams();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const imageRefs = useRef<{ [key: string]: HTMLImageElement | null }>({});
|
||||
|
||||
// Signer data - START
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<DocumentType[] | null>(null);
|
||||
const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
|
||||
|
|
@ -1065,7 +1067,10 @@ const SignDocument = () => {
|
|||
|
||||
<img
|
||||
// style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
|
||||
style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
|
||||
id={`${doc.documentId}-${page.index}`}
|
||||
// style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
|
||||
className={`w-[${page.width / 2}px] h-[${page.height / 2}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
|
||||
ref={(el) => (imageRefs.current[page.index] = el)}
|
||||
draggable="false"
|
||||
// onLoad={(imgElem) => {
|
||||
// setPageScales((prev) => ({
|
||||
|
|
@ -1084,6 +1089,9 @@ const SignDocument = () => {
|
|||
{!hideTags && <>
|
||||
<TagsCon
|
||||
pageWidth={page.width}
|
||||
pageHeight={page.height}
|
||||
renderedWidth={imageRefs.current[page.index]?.offsetWidth || 0}
|
||||
renderedHeight={imageRefs.current[page.index]?.offsetHeight || 0}
|
||||
currDocTags={currDocTags}
|
||||
pageIdkey={key}
|
||||
provideTags={provideTags}
|
||||
|
|
@ -1236,7 +1244,7 @@ const SignDocument = () => {
|
|||
|
||||
|
||||
{!transparentTags && recipient?.type != "CC" && <>
|
||||
<div className={`w-full shadow-[0_20px_35px_rgba(0,0,0,0.25)] bottom-0 left-0 bg-white px-4 py-2 flex justify-between items-center gap-4`}>
|
||||
<div className={`fixed bottom-0 w-full shadow-[0_20px_35px_rgba(0,0,0,0.25)] bottom-0 left-0 bg-white px-4 py-2 flex justify-between items-center gap-4`}>
|
||||
<p className='text-sm text-slate-600'>By Signing I agree Sign Made Easy <a href="" className="text-[var(--mainPrimaryBtn)]">Terms & Conditions.</a></p>
|
||||
{/* <div className='flex items-center gap-8 cursor-pointer text-xs px-2 py-1 rounded-sm outline-none'>
|
||||
<FaAngleLeft
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ import axios from 'axios';
|
|||
|
||||
interface TagsConProps {
|
||||
pageWidth: number,
|
||||
pageHeight: number,
|
||||
renderedWidth: number,
|
||||
renderedHeight: number,
|
||||
currDocTags: DroppedItem[]
|
||||
pageIdkey: string;
|
||||
provideTags: boolean
|
||||
|
|
@ -41,6 +44,9 @@ interface TagsConProps {
|
|||
|
||||
const TagsCon: React.FC<TagsConProps> = ({
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
renderedWidth,
|
||||
renderedHeight,
|
||||
currDocTags,
|
||||
pageIdkey,
|
||||
provideTags,
|
||||
|
|
@ -309,7 +315,9 @@ const TagsCon: React.FC<TagsConProps> = ({
|
|||
<>
|
||||
{currDocTags.map((item, index) => {
|
||||
if ((item.pageIndex != pageIndex) || (item.documentId != documentId)) return <></>;
|
||||
console.log('pageWidth:', pageWidth, 'computed left:', (item.dimensions.left / pageWidth) * 100);
|
||||
const scaleX = renderedWidth / Math.round(pageWidth);
|
||||
const scaleY = renderedHeight / Math.round(pageHeight);
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={index + 1}
|
||||
|
|
@ -322,21 +330,26 @@ const TagsCon: React.FC<TagsConProps> = ({
|
|||
// onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className="absolute rounded dropped-item text-sm"
|
||||
// onClick={() => handleTagClick(key, index)}
|
||||
// style={{
|
||||
// left: `${item.dimensions.left}px`,
|
||||
// top: `${item.dimensions.top}px`,
|
||||
// width: `${item.dimensions.width}px`,
|
||||
// height: `${item.dimensions.height}px`,
|
||||
// border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) ? '2px dashed #1c398e' : 'none'}`,
|
||||
// // display: `${hideTags ? 'none' : 'block'}`
|
||||
// }}
|
||||
|
||||
style={{
|
||||
left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
top: item.dimensions.top,
|
||||
width: `${((item.dimensions.width / pageWidth) * 100)}%`,
|
||||
height: item.dimensions.height,
|
||||
left: `${item.dimensions.left * scaleX}px`,
|
||||
top: `${item.dimensions.top * scaleY}px`,
|
||||
width: `${item.dimensions.width * scaleX}px`,
|
||||
height: `${item.dimensions.height * scaleY}px`,
|
||||
border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) ? '2px dashed #1c398e' : 'none'}`,
|
||||
// display: `${hideTags ? 'none' : 'block'}`
|
||||
}}
|
||||
// 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`
|
||||
// }}
|
||||
// style={{
|
||||
// left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
// top: item.dimensions.top,
|
||||
// width: `${((item.dimensions.width / pageWidth) * 100)}%`,
|
||||
// height: item.dimensions.height,
|
||||
// }}
|
||||
>
|
||||
|
||||
{item.required && <div
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const fetchedTags: string[] = []
|
|||
|
||||
// 👇 Create an interface for the exposed methods
|
||||
export interface DocumentContainerRef {
|
||||
handleTransactionProcess: () => void;
|
||||
handleTransactionProcess: (isSave?: boolean, isNavigate?: boolean, navigateTo?: string) => void;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -84,6 +84,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
const childRef = useRef<any>(null);
|
||||
const tagUndoRef = useRef<DroppedItem[] | []>([]);
|
||||
|
||||
const imageRefs = useRef<{ [key: string]: HTMLImageElement | null }>({});
|
||||
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
|
@ -233,12 +235,15 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
};
|
||||
|
||||
|
||||
const handleTransactionProcess = async (save: boolean = false) => {
|
||||
const handleTransactionProcess = async (save: boolean = false, isNavigate: boolean = false, navigateTo: string = "/") => {
|
||||
|
||||
if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true;
|
||||
// if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true;
|
||||
|
||||
dispatch(showLoader("Saving Tags ..."))
|
||||
if (Object.keys(droppedItems).length == 0) return;
|
||||
if (Object.keys(droppedItems).length == 0) {
|
||||
if (isNavigate) navigate(navigateTo);
|
||||
dispatch(hideLoader());
|
||||
};
|
||||
// if (!save) return;
|
||||
|
||||
let updatedTags: any = [];
|
||||
|
|
@ -260,10 +265,12 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
// window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
|
||||
}
|
||||
dispatch(hideLoader())
|
||||
} else {
|
||||
navigate("/templates")
|
||||
dispatch(hideLoader())
|
||||
}
|
||||
|
||||
if (isNavigate) {
|
||||
navigate(navigateTo);
|
||||
}
|
||||
dispatch(hideLoader());
|
||||
// SENDING Transaction - END
|
||||
}
|
||||
|
||||
|
|
@ -312,8 +319,20 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
// if (!field) return; // If not found, exit
|
||||
|
||||
const dropZone = event.currentTarget.getBoundingClientRect();
|
||||
let x = event.clientX - dropZone.left - (dragElemData.width / 2);
|
||||
let y = event.clientY - dropZone.top - (dragElemData.height / 2);
|
||||
|
||||
let clientX, clientY;
|
||||
|
||||
if (event.type.startsWith("touch") || event.nativeEvent?.changedTouches) {
|
||||
const touch = event.nativeEvent?.changedTouches?.[0] || event.changedTouches?.[0];
|
||||
clientX = touch.pageX;
|
||||
clientY = touch.pageY;
|
||||
} else {
|
||||
clientX = event.clientX;
|
||||
clientY = event.clientY;
|
||||
}
|
||||
|
||||
let x = clientX - dropZone.left - (dragElemData.width / 2);
|
||||
let y = clientY - dropZone.top - (dragElemData.height / 2);
|
||||
|
||||
// Handling Drop Over Right
|
||||
// if (dropZone.width < x + dragElemData.width) {
|
||||
|
|
@ -549,7 +568,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
// className={`w-[${(page.width / 2)}px] h-[${(page.height / 2)}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
|
||||
id={`${doc.id}-${page.index}`}
|
||||
className={`w-[${page.width / 2}px] h-[${page.height / 2}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
|
||||
|
||||
ref={(el) => (imageRefs.current[page.index] = el)}
|
||||
draggable="false"
|
||||
width={page.width}
|
||||
height={page.height}
|
||||
|
|
@ -561,6 +580,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
|
|||
<DroppedItemsTagsCon
|
||||
pageWidth={page.width}
|
||||
pageHeight={page.height}
|
||||
renderedWidth={imageRefs.current[page.index]?.offsetWidth || 0}
|
||||
renderedHeight={imageRefs.current[page.index]?.offsetHeight || 0}
|
||||
ref={childRef}
|
||||
droppedItems={droppedItems}
|
||||
pageIdkey={key}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,10 @@ import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
|
|||
import { DroppedItem } from '../../../utlity/types';
|
||||
|
||||
interface DroppedItemsTagsConProps {
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
pageWidth: number,
|
||||
pageHeight: number,
|
||||
renderedWidth: number,
|
||||
renderedHeight: number,
|
||||
droppedItems: DroppedItemsObj;
|
||||
pageIdkey: string;
|
||||
selectedTag: { key: string; index: number } | null;
|
||||
|
|
@ -37,6 +39,8 @@ interface DroppedItemsTagsConProps {
|
|||
const DroppedItemsTagsCon = forwardRef(({
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
renderedWidth,
|
||||
renderedHeight,
|
||||
droppedItems,
|
||||
pageIdkey,
|
||||
selectedTag,
|
||||
|
|
@ -165,10 +169,17 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
let clientX = event.clientX
|
||||
let clientY = event.clientY
|
||||
|
||||
if ((event as any).changedTouches?.[0]) {
|
||||
clientX = (event as any).changedTouches[0].pageX;
|
||||
clientY = (event as any).changedTouches[0].pageY;
|
||||
}
|
||||
|
||||
// Calculate the initial offset (where the mouse was clicked inside the element)
|
||||
const offsetX = event.clientX - elementRect.left;
|
||||
const offsetY = event.clientY - elementRect.top;
|
||||
const offsetX = event.clientX - elementRect.left;
|
||||
|
||||
positionRef.current = { left: event.clientX - containerRect.left - offsetX, top: event.clientY - containerRect.top - offsetY };
|
||||
|
||||
|
|
@ -191,8 +202,16 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
// 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;
|
||||
let clientX = event.clientX
|
||||
let clientY = event.clientY
|
||||
|
||||
if ((event as any).changedTouches?.[0]) {
|
||||
clientX = (event as any).changedTouches[0].pageX;
|
||||
clientY = (event as any).changedTouches[0].pageY;
|
||||
}
|
||||
|
||||
let left = clientX - containerRect.left - offsetX;
|
||||
let top = clientY - containerRect.top - offsetY;
|
||||
|
||||
// Restrict movement within container bounds
|
||||
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
|
||||
|
|
@ -205,6 +224,10 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
targetElement!.style.top = `${top}px`;
|
||||
targetElement!.style.left = `${left}px`;
|
||||
|
||||
|
||||
|
||||
console.log(top, left, "top, left Line 283")
|
||||
|
||||
// Apply the movement to the element first
|
||||
// setDroppedItems(prevState => ({
|
||||
// ...prevState,
|
||||
|
|
@ -248,6 +271,8 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
}
|
||||
|
||||
const { left, top } = positionRef.current;
|
||||
console.log(top, left, "HandleTag Mouse Up top, left Line 283")
|
||||
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: Array.isArray(prevState[key])
|
||||
|
|
@ -292,10 +317,6 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
const dropZone: DOMRect = targetContainer?.getBoundingClientRect() as DOMRect;
|
||||
const droppedElemRect: DOMRect = targetElement?.getBoundingClientRect() as DOMRect;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(dropZone, "dropZone Line 309")
|
||||
console.log(droppedElemRect, "rect Line 309")
|
||||
|
||||
|
|
@ -565,6 +586,10 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
const type = item.type.toUpperCase();
|
||||
const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
|
||||
const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id == item.recipientId);
|
||||
|
||||
const scaleX = renderedWidth / Math.round(pageWidth);
|
||||
const scaleY = renderedHeight / Math.round(pageHeight);
|
||||
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<div
|
||||
|
|
@ -575,25 +600,24 @@ const DroppedItemsTagsCon = forwardRef(({
|
|||
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`
|
||||
// }}
|
||||
|
||||
style={{
|
||||
// left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
// top: `${((item.dimensions.top / pageHeight) * 100)}%`,
|
||||
// width: `${(item.dimensions.width / pageWidth) * 100}%`,
|
||||
// height: `${(item.dimensions.height / pageHeight) * 100}%`,
|
||||
left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
top: `${((item.dimensions.top / pageHeight) * 100)}%`,
|
||||
width: `${(item.dimensions.width / pageWidth) * 100}%`,
|
||||
height: `${(item.dimensions.height / pageHeight) * 100}%`,
|
||||
left: `${item.dimensions.left * scaleX}px`,
|
||||
top: `${item.dimensions.top * scaleY}px`,
|
||||
width: item.type == "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width * scaleX}px`,
|
||||
height: item.type == "radio" ? `max-content` : `${item.dimensions.height * scaleY}px`
|
||||
}}
|
||||
>
|
||||
|
||||
// style={{
|
||||
// // left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
// // top: `${((item.dimensions.top / pageHeight) * 100)}%`,
|
||||
// // width: `${(item.dimensions.width / pageWidth) * 100}%`,
|
||||
// // height: `${(item.dimensions.height / pageHeight) * 100}%`,
|
||||
// left: `${((item.dimensions.left / pageWidth) * 100)}%`,
|
||||
// top: `${((item.dimensions.top / pageHeight) * 100)}%`,
|
||||
// width: `${(item.dimensions.width / pageWidth) * 100}%`,
|
||||
// height: `${(item.dimensions.height / pageHeight) * 100}%`,
|
||||
// }}
|
||||
>
|
||||
|
||||
{/* If Selected Tag Recipient Info- START */}
|
||||
{selectedTag?.key && selectedTag.key == pageIdkey && selectedTag.index == index &&
|
||||
|
|
|
|||
|
|
@ -90,204 +90,246 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
|
|||
return (
|
||||
<>
|
||||
{/* Left Side Bar - START */}
|
||||
{
|
||||
(isPages || isFields) && <div className={`sm:block p-4 absolute sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 sm:h-[calc(100vh-40px)] overflow-y-auto sm:w-auto ${isFields ? "h-[150px] bottom-0 overflow-x-hidden w-full": "h-[calc(100vh-40px)]"} `}>
|
||||
<div
|
||||
<div className='col-span-2'>
|
||||
|
||||
{
|
||||
(isPages || isFields) && <div className={`sm:block p-4 absolute sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 sm:h-[calc(100vh-40px)] overflow-y-auto sm:w-auto ${isFields ? "h-[150px] bottom-0 overflow-x-hidden w-full" : "h-[calc(100vh-40px)]"} `}>
|
||||
<div
|
||||
onClick={() => {
|
||||
handleSetIsPages(false)
|
||||
handleSetIsFields(false)
|
||||
}}
|
||||
className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'>
|
||||
<IoMdClose />
|
||||
</div>
|
||||
|
||||
<div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
|
||||
<div
|
||||
onClick={() => handleSetIsFields(!isFields)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
||||
<LuTableOfContents />
|
||||
<p className='tracking-wide'>Tags</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={() => handleSetIsPages(!isPages)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
||||
<IoIosDocument />
|
||||
<p className='tracking-wide'>Pages</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{selectedRecipients.length > 0 && isFields && <>
|
||||
{/* Fields List and Recipeint - Start */}
|
||||
{/* Side Bar showing Recipients */}
|
||||
<div className='sm:relative sm:top-0 sm:left-0 fixed w-full'>
|
||||
|
||||
<div className='relative'
|
||||
tabIndex={0}
|
||||
onBlur={() => setDropDownToggle(false)}>
|
||||
{/* Selected Recipient */}
|
||||
<div
|
||||
id='switch-recipients-left'
|
||||
onClick={() => setDropDownToggle(!dropDownToggle)}
|
||||
className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
||||
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
||||
<p>
|
||||
{
|
||||
selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
|
||||
(selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
<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'
|
||||
onClick={() => {
|
||||
setSelectedRecipient(indx);
|
||||
setTimeout(() => {
|
||||
setDropDownToggle(false);
|
||||
}, 0)
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
||||
<p>
|
||||
{
|
||||
recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
|
||||
(recipient.email.length == 0 ? recipient.roleName : recipient.email) :
|
||||
`${recipient.firstName + " " + recipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
{selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
|
||||
</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Side Bar showing Recipients - ENDS*/}
|
||||
|
||||
{/* Drag Drop Tags Start */}
|
||||
<div
|
||||
id='tags-con-dash-left'
|
||||
className='mt-2 w-full h-[400px] sm:h-auto'>
|
||||
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* Fields List and Recipeint - End */}
|
||||
</>}
|
||||
|
||||
{isPages && <>
|
||||
{/* Pages - START */}
|
||||
<div className='flex flex-col gap-2'>
|
||||
{selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
// tabIndex={1}
|
||||
// onBlur={() => setDropDownTogglePage('')}
|
||||
>
|
||||
<div
|
||||
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={"data:image/png;base64," + document.thumbnail}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
<div
|
||||
className='flex items-center justify-between w-full text-xs rounded-sm cursor-pointer text-slate-100'>
|
||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]'>{document.name}</p>
|
||||
<MdKeyboardArrowDown className={`${(dropDownTogglePage == 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
dropDownTogglePage == 'pageDropDown' + indx &&
|
||||
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
||||
{/* Prev 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 == 0 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage == 0) e.preventDefault();
|
||||
else setCurrentPage(currentPage - 1);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{/* Pages - END */}
|
||||
</>}
|
||||
</div>
|
||||
}
|
||||
{/* Left Side Bar - END */}
|
||||
|
||||
{/* Small Devices - START */}
|
||||
<div>
|
||||
|
||||
{/* Left Side Pages */}
|
||||
{!isPages && <div
|
||||
onClick={() => {
|
||||
handleSetIsPages(false)
|
||||
handleSetIsPages(true)
|
||||
handleSetIsFields(false)
|
||||
}}
|
||||
className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'>
|
||||
<IoMdClose />
|
||||
</div>
|
||||
|
||||
<div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
|
||||
<div
|
||||
onClick={() => handleSetIsFields(!isFields)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
||||
<LuTableOfContents />
|
||||
<p className='tracking-wide'>Tags</p>
|
||||
className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-50 hover:opacity-100 transition-all duration-300'>
|
||||
<div className='py-2 pl-2 pr-1'>
|
||||
<FaAngleUp className='rotate-90' />
|
||||
<p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
|
||||
<span>P</span>
|
||||
<span>A</span>
|
||||
<span>G</span>
|
||||
<span>E</span>
|
||||
<span>S</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
<div
|
||||
onClick={() => handleSetIsPages(!isPages)}
|
||||
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
||||
<IoIosDocument />
|
||||
<p className='tracking-wide'>Pages</p>
|
||||
|
||||
{!isFields && <div
|
||||
className='sm:hidden fixed bottom-0 left-0 rounded-tr-2xl rounded-tl-2xl bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-50 hover:opacity-100 transition-all duration-300'
|
||||
onClick={() => {
|
||||
handleSetIsPages(false)
|
||||
handleSetIsFields(true)
|
||||
}}
|
||||
>
|
||||
<div className='flex py-2'>
|
||||
<FaAngleUp />
|
||||
<p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
|
||||
<span>T</span>
|
||||
<span>A</span>
|
||||
<span>G</span>
|
||||
<span>S</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
|
||||
{selectedRecipients.length > 0 && isFields && <>
|
||||
{/* Fields List and Recipeint - Start */}
|
||||
{/* Side Bar showing Recipients */}
|
||||
<div className='sm:relative sm:top-0 sm:left-0 absolute w-full'>
|
||||
|
||||
<div className='relative'
|
||||
tabIndex={0}
|
||||
onBlur={() => setDropDownToggle(false)}>
|
||||
{/* Selected Recipient */}
|
||||
<div
|
||||
id='switch-recipients-left'
|
||||
onClick={() => setDropDownToggle(!dropDownToggle)}
|
||||
className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
||||
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
||||
<p>
|
||||
{
|
||||
selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
|
||||
(selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
||||
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
<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'
|
||||
onClick={() => {
|
||||
setSelectedRecipient(indx);
|
||||
setTimeout(() => {
|
||||
setDropDownToggle(false);
|
||||
}, 0)
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
||||
<p>
|
||||
{
|
||||
recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
|
||||
(recipient.email.length == 0 ? recipient.roleName : recipient.email) :
|
||||
`${recipient.firstName + " " + recipient.lastName}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
{selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
|
||||
</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Side Bar showing Recipients - ENDS*/}
|
||||
|
||||
{/* Drag Drop Tags Start */}
|
||||
<div
|
||||
id='tags-con-dash-left'
|
||||
className='mt-4 w-full'>
|
||||
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* Fields List and Recipeint - End */}
|
||||
</>}
|
||||
|
||||
{isPages && <>
|
||||
{/* Pages - START */}
|
||||
<div className='flex flex-col gap-2'>
|
||||
{selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
// tabIndex={1}
|
||||
// onBlur={() => setDropDownTogglePage('')}
|
||||
>
|
||||
<div
|
||||
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={"data:image/png;base64," + document.thumbnail}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
<div
|
||||
className='flex items-center justify-between w-full text-xs rounded-sm cursor-pointer text-slate-100'>
|
||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]'>{document.name}</p>
|
||||
<MdKeyboardArrowDown className={`${(dropDownTogglePage == 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
dropDownTogglePage == 'pageDropDown' + indx &&
|
||||
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
||||
{/* Prev 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 == 0 ? "pointer-events-none opacity-50" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (currentPage == 0) e.preventDefault();
|
||||
else setCurrentPage(currentPage - 1);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{/* Pages - END */}
|
||||
</>}
|
||||
</div>
|
||||
}
|
||||
{/* Left Side Bar - END */}
|
||||
|
||||
{/* Small Devices - START */}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Small Devices - END */}
|
||||
{/* Small Devices - END */}
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ interface NavTwoProps {
|
|||
isPreview?: boolean
|
||||
aId?: string | null
|
||||
tId?: string | null
|
||||
onSendClick?: () => void;
|
||||
onSendClick?: (isSave?: boolean, navigate?: boolean, navigateTo?: string) => void;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -171,6 +171,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
|
||||
function handleSend(isSignSend: boolean = false) {
|
||||
// dispatch(showLoader("Loading ..."));
|
||||
if (onSendClick === undefined) return;
|
||||
|
||||
const transactionSendValidationObj = transactionSendValidation()
|
||||
if (transactionSendValidationObj.oneSignerIsRequiredError) {
|
||||
|
|
@ -185,13 +186,14 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
// setTimeout(() => {
|
||||
if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
if (isSignSend) {
|
||||
// SELF SIGN CHECK HERE
|
||||
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
|
||||
}
|
||||
else {
|
||||
onSendClick();
|
||||
onSendClick(false); // false for not a save action
|
||||
}
|
||||
} else {
|
||||
onSendClick();
|
||||
onSendClick(true, true, "/templates"); // true for save action
|
||||
}
|
||||
// }, 1000)
|
||||
}
|
||||
|
|
@ -290,7 +292,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
{/* Trigger */}
|
||||
<button
|
||||
onClick={() => setShowActionsDropDown((prev) => !prev)}
|
||||
className="flex justify-center items-center bg-white px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50 ">
|
||||
className="flex justify-center items-center bg-white px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||
<p className='tracking-wide mr-1'>Actions</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</button>
|
||||
|
|
@ -303,12 +305,28 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
{/* <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
Save & Close
|
||||
</button> */}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (onSendClick !== undefined) onSendClick(true, false); // true for save action
|
||||
setShowActionsDropDown(false)
|
||||
}}
|
||||
className="cursor-pointer w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (onSendClick !== undefined) onSendClick(true, true, transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "/templates" : "/"); // true for save action
|
||||
setShowActionsDropDown(false);
|
||||
}}
|
||||
className="cursor-pointer w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
Save & Close
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setMessageModal(true)
|
||||
setShowActionsDropDown(false)
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
className="cursor-pointer w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
Edit Message
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -316,7 +334,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
|
|||
setEditRecipientsModal(true)
|
||||
setShowActionsDropDown(false)
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
className="cursor-pointer w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
|
||||
Edit Recipients
|
||||
</button>
|
||||
{/* <button
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ const ProcessStepTwo = () => {
|
|||
|
||||
const docRef = useRef<DocumentContainerRef>(null);
|
||||
|
||||
const handleSendClick = () => {
|
||||
docRef.current?.handleTransactionProcess();
|
||||
const handleSendClick = (isSave = false, isNavigate = false, navigateTo = "/") => {
|
||||
docRef.current?.handleTransactionProcess(isSave, isNavigate, navigateTo);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -158,9 +158,9 @@ const TransactionView = () => {
|
|||
>
|
||||
Sign
|
||||
</button> */}
|
||||
<button className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold'>
|
||||
{/* <button className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold'>
|
||||
More
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{transactionDetails.transaction.status == "CREATED" && <Link className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/setup-transaction/${accountId}/${transactionId}`}>
|
||||
Edit
|
||||
|
|
|
|||
Loading…
Reference in New Issue