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

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -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(() => {
+        // useEffect(() => {
-        handleTransactionProcess()
+        //     handleTransactionProcess()
-    }, [isSend])
+        // }, [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;

src/components/process/processStepTwo/NavTwo.tsx

@@ -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) {
+        // if (isSend === null) {
-            setIsSend(false);
+        //     setIsSend(false);
-        }
+        // }
-        setIsSend(!isSend);
+        // 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) {

src/components/process/processStepTwo/ProcessStepTwo.tsx

@@ -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 />}

src/components/transactions/TransactionView.tsx

@@ -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>