Skip to content
My Docs

Tender Management System – Data Fetching and OTP Handling and approving the ITQ/RFQ/EOI/TOR tenders

2. Key Features:

  • Tender Details Fetching: Retrieves and displays details about a tender based on its ID (reviewTenderParam), such as its activity type and associated documents.
  • OTP Verification: Handles OTP generation, sending, and verification for approving or reviewing tenders. The OTP is linked to a specific tender and approver.
  • Tab Management: Manages different tender-related tabs (e.g., “EOI” and “TOR”) based on the activity type and user actions.
  • PDF Generation: Generates and displays PDFs (e.g., for ITQ, TOR, or EOI) based on the selected tender.
  • Tender Status Update: Handles tender approval and rejection, updating the status and saving comments.
  • File Download: Allows users to download attachments (like documents or PDFs) associated with a tender.

3. Key Functionalities:

  • Fetching Tender Data:

    • useEffect is used to fetch the tender details when a specific tender ID (reviewTenderParam) is present in the search parameters.
    • This action triggers a fetch request to the tenderService.getTenderBySerialId, which returns tender details, such as the activity type (e.g., DSSP, RFQ) and reviewer information.
    • Depending on the activity type, appropriate PDF documents are generated (e.g., generatePdfFileITQ, generatePdfFileTOR).
    • The tender details and associated PDFs are stored in state variables (setTenderDetails, setGeneratedPdf, etc.).

  • OTP Management:

    • OTP details are stored in localStorage and are used to verify the tender approval process.
    • If the OTP for a tender has already been verified, it updates the state (setIsVerifiedOtp) and displays a success message.
    • The OTP can be resent if the current status of the tender allows it. A new OTP is generated if necessary (generateOtp).
    • OTP verification occurs when the user submits it, and if successful, the OTP status is updated in localStorage.

  • Handling File Downloads:

    • The handelDownload function allows downloading different attachments based on the current tab (EOI, TOR, etc.) and the activity type of the tender (DSSP, RFQ).
    • It fetches the file from the appropriate URL and triggers the download by creating a temporary anchor (<a>) element.
    • File selection logic is dependent on both the selectedTabLabel and tenderDetails.activity_type.

  • Tender Status Updates:

    • The updateTenderStatus function allows the user to update the status of the tender to either “Approved” or “Declined”.
    • It checks if the comment is provided and sends the updated status to the backend using tenderService.updateTender.
    • A success message is displayed upon successful status update.

  • Tab Management:

    • The tabs are dynamically set based on the tender’s activity type. Depending on whether the activity type is DSSP or RFQ, only specific tabs (ITQ, RFQ) are shown. Otherwise, the tabs include EOI and TOR.
    • The handleTabChange function switches between the tabs, updating the selected tab state (selectedTabLabel).

4. Data Fetching and Step Handling:

Data Fetching:

  • Data is fetched using asynchronous functions triggered by the useEffect hook. For example, tender details are fetched based on reviewTenderParam, and OTP details are retrieved from localStorage to verify or resend the OTP.
  • Data fetching occurs within conditional logic that checks if the necessary parameters (like reviewTenderParam or OTP details) are present.
  • The fetchTender and fetchApproverStatus functions manage fetching and processing of tender-related data, such as checking the tender status and generating the necessary PDFs.

Step Handling:

  • Form steps: This code doesn’t appear to have multi-step forms but does handle different stages of the tender approval process, which is conceptually similar. These stages include tender detail fetching, OTP verification, and tender approval/rejection.
  • Stage transitions: The state transitions between these stages are controlled by React’s state (useState) and effects (useEffect). For instance, after fetching the tender details, the state is updated with the tender’s data, and based on the activity type, the proper actions (such as PDF generation) are triggered.
  • Tabs: The tabs control the flow of information and which data is displayed. When the user switches between the tabs (e.g., from EOI to TOR), different sets of data or actions are presented, such as different PDF files or related information.

Code Example:

useEffect(() => {
    (async () => {
        console.log("Fetching tender details for review...");
        if (searchParams.get("review-tender")) {
            setReviewTenderParam(searchParams.get("review-tender"));
        }
    })()
}, [searchParams]);


useEffect(() => {
    if (reviewTenderParam) {
        const fetchTender = async () => {
            setLoading(true);
            try {
                // Fetch tender details from service
                const tenderDetailsResponse = await tenderService.getTenderBySerialId(reviewTenderParam);
                if (tenderDetailsResponse?.tender) {
                    setTenderDetails(tenderDetailsResponse.tender);
                }
            } catch (error) {
                console.error('Error fetching tender:', error);
            } finally {
                setLoading(false);
            }
        };
        fetchTender();
    }
}, [reviewTenderParam]);


const handleResendOtpSubmit = async () => {
    // Resend OTP logic based on approver status
    if (tenderDetails && user) {
        try {
            const response = await tenderApproverService.getTenderApproverStatus(tenderDetails.serial_id, user._id);
            if (response?.status && response.approver_details.status === "Pending") {
                const shortId = generateOtp(6);
                const temp = { tender_id: tenderDetails.serial_id, otp: shortId, approver_id: user._id };
                await tenderService.updateOtpData(temp);
                toast.success('OTP has been resent to your email address.');
            }
        } catch (error) {
            console.error('Error resending OTP:', error);
            toast.error('Failed to resend OTP.');
        }
    }
};

This example demonstrates how fetching tender details and handling OTP resending are integrated. The system fetches data asynchronously, updates the state, and responds to user interactions, such as OTP verification and tender approval.