Getting Started with the Tender logics

Overview of the Key Features, Functionalities, and Data Flow

1. Key Features:

• Document Generation and Downloading: The component allows the user to generate and download two specific documents (EOI and TOR or ITQ or RFQ) based on predefined templates. This feature includes handling loading states for the download process.
• File Submission: The user can submit files for approval by generating and uploading two documents (EOI and TOR or ITQ or RFQ) via a button. The submission process includes updating a tender record and sending notifications.
• Step Navigation: The component appears to be part of a multi-step form. It includes methods for navigating between steps (nextStep, prevStep) and submitting data (submitFinal).
• Success and Alert Handling: After a successful tender submission, the component displays an alert indicating that the tender was created successfully.
• Request Overview Modal: It includes a modal (RequestOverViewModal) for viewing the request details.
• Dynamic Data Handling: The component interacts with various dynamic fields and updates its state based on the values retrieved or set by these fields, such as generateWordDocxTOR and generateWordDocx.

2. Key Functionalities:

• Form Data Handling:

  • The handleChange function updates the state (submissionData) based on user inputs for proposal details like the deadline, structure, and format.
  • The state is updated dynamically as the user interacts with the form inputs (e.g., checkbox or text input).

• File Operations:

  • The handleFileOperation function is responsible for calling the document service to process files based on a template (either TOR or EOI). This involves making an API call to edit and download files.
  • Both handleDownload and handleDownloadEOI methods trigger file operations to download the relevant documents.

• File Submission:

  • The submitFiles method handles the submission of the documents (TOR and EOI). It:
    1. Prepares the data to send (including file paths).
    2. Updates the tender record with the generated file paths.
    3. Sends a notification email upon submission.
    4. Updates the state and disables the submission button after the process is complete.
    5. Redirects to a review page.

• UI and Feedback:

  • The loading indicators (CircularProgress) are used to indicate that files are being processed during download and submission.
  • The success alert (Alert) is displayed when the submission is successful.

3. Data Fetching and Step Handling:

• Data Fetching:

  • The data used for document generation is primarily fetched from the generateWordDocxTOR, generateWordDocx, and dynamicFieldsTOR/dynamicFieldsEOI variables. These variables hold the template data and paths for the documents, which are passed into the functions to update or fetch the required file.
  • When files are submitted, an API call is made (tenderService.updateTenderBySerialId) to update the tender details with the generated file paths.

• Step Handling:

  • The component utilizes nextStep, prevStep, and submitFinal props to control the flow between different steps of the form.
  • Upon clicking the “Submit For Approval” button, the submitFiles method handles the final step, processes the files, and updates the tender before redirecting the user to a review page (router.push).
  • stepFiveLoader manages a loading state that prevents the user from interacting with the form while waiting for a submission to complete.

Code Reference and Explanation:

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const { name, value, type } = e.target;
  if (type === "checkbox") {
    const { checked } = e.target as HTMLInputElement;
    setSubmissionData((prevState) => ({
      ...prevState,
      [name]: checked ? "electronic" : "hardCopy", // Update based on checkbox selection
    }));
  } else {
    setSubmissionData((prevState) => ({
      ...prevState,
      [name]: value, // Update text or other input fields
    }));
  }
};

• Explanation: The handleChange function dynamically updates the submissionData state object based on user input. It accounts for both checkbox and text-based input fields. This method ensures that user input is reflected in the component’s state and can be used later in file generation or submission.

const submitFiles = async () => {
  setLoadingSubmit(true); // Show loading spinner during submission
  try {
    const dataToSend = {
      values_to_change: generateWordDocxTOR, // Data for generating the TOR document
      file_path: dynamicFieldsTOR.document_link, // File path for the TOR document
      file_name: 'tender_TOR.docx',
      is_table: isTableTor, // Boolean indicating if it's a table document
    };

    const filePathToSave = await handleFileOperation(dataToSend); // Process the file generation
    setDocFileNames((prevFileNames) => [...prevFileNames, filePathToSave.file_path]); // Save the file paths

    // Further steps for submitting the tender details
    const dataToUpdate = {
      serial_id: draftId,
      gov_attachment: [filePathToSave.file_path],
      organization_id: user?.organization_id,
      agency: organizationName,
      status: 'Pending'
    };
    const updatedTenderDetails = await tenderService.updateTenderBySerialId(dataToUpdate); // Update tender in the backend
    setTenderSuccess(true); // Display success message

    // Redirect after submission
    router.push(`review-tender?tender-id=${updatedTenderDetails.serial_id}`);
  } catch (error) {
    console.error('Error during submission:', error);
  } finally {
    setLoadingSubmit(false); // Hide loading spinner
  }
};

• Explanation: The submitFiles function controls the submission process. It prepares the file data, calls the service to process the file, updates the state with the file paths, and sends the updated tender details to the backend. After a successful submission, it redirects the user to a review page.

In summary, the component is responsible for managing the form steps, handling dynamic document generation and submission, and updating the backend. It provides a comprehensive flow from user interaction to data processing and final submission, with appropriate feedback mechanisms for the user.