Getting Started with DSSP Tender Process Management with Step-by-Step Form Handling

Key Features:

1. Dynamic Step Management: The form is divided into multiple steps, each associated with different types of data (e.g., additional info, template details, submission requirements, etc.).
2. Data Fetching: Data is fetched based on parameters such as the draft-id and step, with specific functions implemented to handle fetching and processing the tender data at each step.
3. Data Conversion: Various conversion utilities are implemented to reformat data (e.g., arrays to objects, ITQ values to labels) for use within the form.
4. Loader States: Loader states (stepOneLoader, stepFourLoader, etc.) are managed at each step to handle asynchronous operations smoothly.
5. Template Management: Template data (e.g., Invitation to Quote) is fetched and processed dynamically for each tender step.
6. State Management: Various states are maintained to track the current step, form data, loaded data, and other parameters (e.g., procurement process, reviewers, tender details).

Key Functionalities:

1. useEffect for Initial Data Population:

   • The component uses useEffect to initialize modal data (setRequestOverViewModalData) whenever certain dependencies change, such as cqsProcurementProcess, evaluationCriteria, etc.
   • This effect ensures that the form is populated with the latest data whenever one of these values changes.

   Example:

   useEffect(() => {
        setRequestOverViewModalData({
            "Solicitation Info": [{
                description: additionalData?.description ? additionalData?.description : "",
                title: additionalData?.title ? additionalData?.title : "",
                industry: additionalData?.industry ? additionalData?.industry : "",
                work_location: additionalData?.work_location ? additionalData?.work_location : "",
                submission_deadline: additionalData?.submission_deadline ? additionalData?.submission_deadline : "",
            }],
            "ITQ Template details": cqsProcurementProcess.detailsITQ,
            // ... other fields
        });
    }, [cqsProcurementProcess, evaluationCriteria, porposalCriteria, formDataEOI, quotationfromSupplier, priceAndDelivery, technicalSpecifications, otherDocumentation]);

2. fetchTenderData:

   • This function is responsible for fetching tender data based on a draft-id and a step parameter from the URL. It invokes the appropriate handler for each step (handleStepOne, handleStepTwo, etc.).
   • It ensures that the correct data is loaded based on the current step, enabling a dynamic, step-based flow of tender data.

   Example:

   const fetchTenderData = async (draftId, stepParam) => {
        try {
            const draftTender = await tenderService.getDraftTenderBySerialIdITQ(draftId);
            const { tender } = draftTender;
            if (stepParam === '1') {
                await handleStepOneAdditioal(tender);
            } else if (stepParam === '2') {
                await handleStepOne(tender.process_id, tender);
            }
            // Handle other steps similarly
        } catch (error) {
            console.error('Error fetching tender:', error);
        }
   };

3. handleStepOne, handleStepTwo, etc.:

   • These functions process tender data at each step. For example, handleStepOne fetches the correct template details for the “Invitation to Quote” (ITQ) process and prepares dynamic fields for the form.
   • handleStepTwo handles the “Price and Delivery Schedule” and processes any necessary documents or specifications.

   Example for handleStepOne:

   const handleStepOne = async (processId, tender) => {
        try {
            if (procurementCategories.length > 0) {
                const matchingProcess = procurementCategories.find((item) => item._id === processId);
                if (matchingProcess) {
                    const templateData = await templatesService.fetchTemplateByIdProcurementProcessId(matchingProcess._id);
                    // Set dynamic fields and process data
                }
            }
        } catch (error) {
            console.error('Error in handleStepOne:', error);
        }
    };

4. State Management for Dynamic Data:

   • Each step updates specific states (setFormData, setDynamicFieldsTOR, setQuotationfromSupplier, etc.) based on the step’s needs. For example, the first step might involve updating general information, while later steps deal with procurement categories, quotations, or review data.

5. Tab Navigation:

   • The handleTabClick function allows for navigation between the form’s different tabs, each representing a step in the process. The current tab is stored in currentTab, and clicking on a tab updates the URL and changes the visible form content.

   Example for navigating to the next step:

   const nextStep = () => {
       setCurrentTab((prevState) => prevState + 1);
       setCurrentTabBar((prevState) => prevState + 1);
   };

Data Fetching and Step Handling:

• Data Flow: Data is fetched based on the draft-id and step query parameters in the URL. Each step has its own specific handler that processes data according to the requirements of that step.
• Fetching Tender Data: The fetchTenderData function fetches the draft tender data and invokes the corresponding step handler (e.g., handleStepOne, handleStepTwo). Each handler processes the data relevant to that step, such as fetching procurement categories, template details, or reviewer information.
• Step Management: The component uses currentTab and currentTabBar to track which tab (step) is currently active. The nextStep and prevStep functions adjust these values to move forward or backward in the form. Each step fetches and processes different sets of data, making the flow dynamic and flexible.

Conclusion:

This code implements a dynamic, multi-step tender process management form. It effectively handles the fetching and processing of data at each step, ensuring smooth transitions and state updates as the user progresses through the form. The use of useEffect, conditional fetching, and state updates allows for a responsive and organized flow of information across different stages of the process.