BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Sign Button Remove Asyn | Add Loader | Added Decline Reason in Transaction View | ... 08-10

This commit is contained in:
=bhagwanSingh 2025-10-08 14:05:12 +05:30
parent d4b42d3b11
commit cf7a516d38
4 changed files with 569 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../../store/store'
@ -14,7 +14,7 @@ import { FaQuestionCircle } from 'react-icons/fa';
import typeToIconMap from '../../../helper/iconMap';
import Loader from '../../dashboard/Loader';
import { hideLoader } from '../../../store/slices/loaderSlice';
import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
import DroppedItemsTagsCon from './DroppedItemsTagsCon';
export interface DroppedItemsObj {
@ -49,7 +49,15 @@ let selectedDoc: { [key: string]: string | null } = { key: null }
const fetchedTags: string[] = []
const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving, setTransactionSaving, isSend, isPreview = false, aId = null, tId = null }) => {
// 👇 Create an interface for the exposed methods
export interface DocumentContainerRef {
handleTransactionProcess: () => void;
}
const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProps>(
({ transactionSaving, setTransactionSaving, isSend, isPreview = false, aId = null, tId = null }, ref) => {
let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
const dispatch = useDispatch();
const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
@ -142,7 +150,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
useEffect(() => {
if (selectedRecipients.length === 0) return;
fetchTags();
}, [selectedRecipients]);
}, [selectedRecipients, isPreview]);
// FETCHING TAG - END
const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
@ -226,8 +234,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const handleTransactionProcess = async (save: boolean = false) => {
dispatch(showLoader("Saving Tags ..."))
if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return;
// if (!save) return;
let updatedTags: any = [];
@ -241,16 +250,24 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// return
// SENDING Transaction - START
if (!save) {
dispatch(showLoader("Sending ..."))
const res = await api.put(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
if (res.status >= 200 && res.status < 300) {
// navigate(`/transaction-sent/${accountId}/${transactionId}`, { replace: true })
window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
}
dispatch(hideLoader())
}
// SENDING Transaction - END
}
// Save Tags - START
useEffect(() => {
handleTransactionProcess()
}, [isSend])
// useEffect(() => {
// handleTransactionProcess()
// }, [isSend])
useImperativeHandle(ref, () => ({
handleTransactionProcess,
}));
// Save Tags - END
useEffect(() => {
@ -286,19 +303,19 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
let y = event.clientY - dropZone.top - dragElemData.offsetY;
// Handling Drop Over Right
if(dropZone.width < x + dragElemData.width) {
if (dropZone.width < x + dragElemData.width) {
x -= (x + dragElemData.width) - dropZone.width;
}
// Handling Drop Over Bottom
if(dropZone.height < y + dragElemData.height) {
if (dropZone.height < y + dragElemData.height) {
y -= (y + dragElemData.height) - dropZone.height;
}
// Handling Drop Over Left
if(x < 0) {
if (x < 0) {
x = 0;
}
// Handling Drop Over Top
if(y < 0) {
if (y < 0) {
y = 0;
}
@ -569,6 +586,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
{/* Center Doc Container - END */}
</>
)
}
})
export default DocumentContainer;

48
src/components/process/processStepTwo/NavTwo.tsx
View File

@ -28,6 +28,7 @@ interface NavTwoProps {
isPreview?: boolean
aId?: string | null
tId?: string | null
onSendClick?: () => void;
}
@ -65,7 +66,8 @@ const NavTwo: React.FC<NavTwoProps> = ({
setIsSend,
isPreview = false,
aId = null,
tId = null
tId = null,
onSendClick,
}) => {
let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
const dispatch = useDispatch();
@ -175,55 +177,25 @@ const NavTwo: React.FC<NavTwoProps> = ({
return
}
if (isSend === null) {
setIsSend(false);
}
setIsSend(!isSend);
// if (isSend === null) {
// setIsSend(false);
// }
// setIsSend(!isSend);
setTimeout(() => {
// setTimeout(() => {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (isSignSend) {
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
}
else {
navigate(`/transaction-sent/${accountId}/${transactionId}`, { replace: true })
onSendClick();
}
} else {
navigate(`/templates`);
// toast.success("Template Saved...!", {
// position: "top-center",
// autoClose: 1500,
// hideProgressBar: false,
// closeOnClick: false,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// theme: "light",
// transition: Bounce,
// });
}
}, 1000)
// }, 1000)
}
// const handleSetIsFields = (setTo: boolean) => {
// if (setTo !== undefined && setTo !== isFields) {
// setIsFields(setTo)
// if(setTo === true) {
// setIsPages(false)
// }
// };
// }
// const handleSetIsPages = (setTo: boolean) => {
// if (setTo !== undefined && setTo !== isPages) {
// setIsPages(setTo)
// if(setTo === true) {
// setIsFields(false)
// }
// };
// }
const zoom = (percentage: number, contentClass: string) => {
const content = document.querySelector(`.${contentClass}`);
if (content) {

16
src/components/process/processStepTwo/ProcessStepTwo.tsx
View File

@ -1,8 +1,8 @@
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import NavTwo from './NavTwo';
import LeftSideBar from './LeftSideBar';
import DocumentContainer from './DocumentContainer';
import DocumentContainer, { DocumentContainerRef } from './DocumentContainer';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
@ -50,19 +50,25 @@ const ProcessStepTwo = () => {
const handleSetIsPages = (setTo: boolean) => {
if (setTo !== undefined && setTo !== isPages) {
setIsPages(setTo)
if(setTo === true) {
if (setTo === true) {
setIsFields(false)
}
};
}
const docRef = useRef<DocumentContainerRef>(null);
const handleSendClick = () => {
docRef.current?.handleTransactionProcess();
};
return (
<div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
<NavTwo transactionSaving={transactionSaving} isFields={isFields} isPages={isPages} setIsPages={setIsPages} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
<NavTwo transactionSaving={transactionSaving} isFields={isFields} isPages={isPages} setIsPages={setIsPages} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} onSendClick={handleSendClick} />
<div className='sm:grid sm:grid-cols-12 sm:gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
<LeftSideBar isFields={isFields} isPages={isPages} selectedRecipientIndx={selectedRecipient} setSelectedRecipient={setSelectedRecipient} handleSetIsFields={handleSetIsFields} handleSetIsPages={handleSetIsPages} />
<DocumentContainer transactionSaving={transactionSaving} setTransactionSaving={setTransactionSaving} isSend={isSend} setIsSend={setIsSend} />
<DocumentContainer ref={docRef} transactionSaving={transactionSaving} setTransactionSaving={setTransactionSaving} isSend={isSend} setIsSend={setIsSend} />
</div>
{globalLoader.isLoading && <Loader />}

3
src/components/transactions/TransactionView.tsx
View File

@ -205,6 +205,9 @@ const TransactionView = () => {
{"message" in recipient && <p className="text-xs text-gray-500 italic">
{recipient.message}
</p>}
{"declineReason" in recipient && <p className="text-xs text-gray-500 italic">
{recipient.declineReason}
</p>}
</div>
</div>