Skip to content
My Docs

Getting Started with RFQ Tender Tender Process Form with Dynamic Step Handling and Data Fetching

Key Features:

  1. Multi-Step Form with Dynamic Components: The application implements a multi-step form where each step is represented by a tab. These steps control the flow of the form, with dynamic components rendered based on the current step.

  2. Data Fetching for Tender Details: The code fetches tender data from an API using tenderService and dynamically sets data related to the tender process based on the step number. This data is used to populate various form fields and templates.

  3. Dynamic Form Handling: Dynamic fields are loaded for each step based on the step and procurement categories. This includes handling different types of inputs, such as tables for RFQ templates.

  4. Step Navigation: The user can navigate between steps using a tab navigation system. Steps are controlled by currentTab, and the step-specific data is updated accordingly.

  5. State Management: The code uses the React useState hook for managing various state variables related to the form data, step-specific information, and UI components (e.g., supplierRequestData, quotationfromSupplier, priceAndDelivery).

  6. Componentized UI: Each step of the process corresponds to a different React component. For example, SubmissionRequirementsForm for step 4, DynamicConversionScreen for step 2, and ApproversAndEvaluators for step 3.

  7. Conditional Rendering of Components: Depending on the currentTab value, different components are rendered. For example:

    • Step 0: AdditionalInfoFrom
    • Step 1: DynamicConversionScreen
    • Step 2: SubmissionRequirements
    • Step 3: ApproversAndEvaluators
    • Step 4: SubmissionRequirementsForm

  8. Handling Dynamic Templates and Fields: The code dynamically loads templates and template data (detailsRFQ, matchingProcessTOR) for each step, allowing custom input fields to be presented based on the procurement process.

Key Functionalities:

  1. Fetching Tender Data:

    • The fetchTenderData function is responsible for fetching tender details from the API using the tenderService.getDraftTenderBySerialIdITQ function.
    • Based on the fetched data, different step-specific functions are triggered (e.g., handleStepOne, handleStepTwo, etc.).

  2. Updating Form Data:

    • updateSupplierRequestData and updateAdditionalData functions are used to update the form data in the state as the user interacts with different fields across multiple steps.

  3. Step Handlers:

    • Each step has a corresponding handler that processes and updates relevant data:
      • Step One: Handles general tender information such as description, title, and pricing details.
      • Step Two: Handles documents and specifications such as quotations and technical details.
      • Step Three: Deals with approvers and evaluators, filtering the list based on the tender data.
      • Step Four: Deals with final tender details and generates dynamic fields for the RFQ template.

  4. Dynamic Fields and Templates:

    • Template data for RFQ and other forms are fetched dynamically (fetchTemplateByIdProcurementProcessId), and the form fields are updated based on the received templates.

  5. Tab Navigation:

    • Users can navigate between tabs using the handleTabClick function. The current tab is tracked using the currentTab state, which also determines the visibility of different components.

Data Fetching and Step Handling:

  1. Step Management:

    • The form progresses through steps using the nextStep and prevStep functions. The currentTab state variable tracks the current step, and each step corresponds to a specific React component being rendered.
    • The handleTabClick function updates the currentTab when a user clicks a tab. It also sets the step URL parameter to reflect the current step.

  2. Fetching Data for Each Step:

    • Step 1: Fetches tender data, updates additional data fields like description, title, estimated_price, and others using handleStepOneAdditioal.
    • Step 2: Fetches documents and other details like quotation_from_supplier, price_and_delivery, and sets these values using handleStepTwo.
    • Step 3: Filters and sets lists of evaluators and procurement managers using handleStepThree.
    • Step 4: Handles dynamic template fetching (handleStepFour), updating fields and generating word documents when templates are available.

  3. State Management:

    • Each step has specific states that are updated when the form moves between steps. For example, quotationfromSupplier, priceAndDelivery, and other related states are set during the tender fetch and during the step transitions.
    • The step state helps in managing which part of the form is currently visible, and currentTab reflects the active step, ensuring the correct component is rendered.

  4. Dynamic Rendering Based on Current Step:

    • The components rendered at each step depend on the currentTab value. This ensures that only the relevant form sections are visible, based on the current step.

Example Code:

const handleTabClick = (index: number) => {
    if (index <= currentTabBar) {
        setCurrentTab(index);
        setCurrentTabBar(index);
        const step = index + 1;
        setStep(step);
        const params = new URLSearchParams(searchParams.toString());
        params.set("step", step.toString());
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
    }
};

This function handles tab clicks, updating both the UI and the URL to reflect the current step. The currentTab state is updated, and the corresponding component for the active tab is rendered.

useEffect(() => {
    const draftId = searchParams.get("draft-id");
    const stepParam = searchParams.get("step");
    setDraftId(draftId);
    if (draftId) {
        fetchTenderData(draftId, stepParam);
    }
}, [searchParams.get("draft-id"), procurementCategories, searchParams.get("step")]);

This effect fetches tender data when the draft-id or step URL parameter changes. The data fetched is then passed to the appropriate handler to process the step-specific information.

Summary:

This code is part of a complex multi-step form designed to handle a procurement process. It involves dynamic fetching and rendering of templates, form fields, and data based on the current step. The form uses step-specific handlers for data processing and dynamically updates UI components based on the tender details.