Upload Contract

UploadedProposalGeneration Component Documentation

Overview

The UploadedProposalGeneration component guides the user through a multi-step process to upload a contract, set up supplier information, and select documents for proposal generation.

Key Features

1. Multi-Step Process: Guides users through several steps.
2. Authentication: Fetches and uses the user’s authentication token.
3. State Management: Manages the current step and the download URL of the uploaded file.

Dependencies

• React: For building the component.
• Firebase Authentication: For user authentication.
• Custom Components: Various UI components for each step.

State Management

Uses useState and useEffect for managing state and side effects.

const [steps, setSteps] = useState(1);
const [downloadUrl, setDownloadUrl] = useState("");
const [token, setToken] = useState<string | null>(null);

Fetching Authentication Token

Fetches the user’s authentication token when the component mounts.

useEffect(() => {
  const getIdToken = async () => {
    const token = await user?.getIdToken(true);
    if (token) setToken(token);
  };

  getIdToken();
}, []);

Step Navigation

Functions to navigate between steps.

const next = () => {
  setSteps((prevSteps) => prevSteps + 1);
};

const prev = () => {
  setSteps((prevSteps) => prevSteps - 1);
};

Rendering the Component

Renders different components based on the current step.

return (
  <>
    {steps === 1 && (
      <UploadContract
        user={user}
        setSteps={next}
        setDownloadUrl={setDownloadUrl}
      />
    )}
    {steps === 2 && <SetUpSupplierInfo next={next} prev={prev} />}
    {steps === 3 && <SetUpDocs next={next} prev={prev} />}
    {steps === 4 && (
      <DocumentSelector prev={prev} downloadUrl={downloadUrl} token={token} />
    )}
  </>
);

UploadContract Component Documentation

Overview

The UploadContract component allows the user to upload a contract file. Once uploaded, the user is navigated to the next step.

Key Features

1. File Upload: Allows users to upload contract files.
2. File Validation: Validates the file types.
3. Navigation: Navigates to the next step after successful upload.

Dependencies

• React: For building the component.
• Firebase Authentication: For user authentication.
• Sonner: For displaying toast notifications.
• Custom Components: DragNdrop for drag-and-drop file upload.

State Management

Uses useState for managing selected files and loading state.

const [files, setFiles] = useState<File[]>([]);
const [isLoading, setIsLoading] = useState(false);

File Upload

Handles the file upload process and updates the state.

const uploadFile = async () => {
  setIsLoading(true);

  if (files.length === 0 || !user) {
    setIsLoading(false);
    return toast("No File Uploaded");
  }

  try {
    const url = await uploadFilesToFireBase(
      files,
      user.uid,
      "uploadedContracts"
    );
    if (url) setDownloadUrl(url);
    setFiles([]);
    setSteps(2);
  } catch (error) {
    console.error("Error uploading file:", error);
  } finally {
    setIsLoading(false);
  }
};

Rendering the Component

Displays the file upload interface and the upload button.

return (
  <div className="p-10">
    <h1 className="mb-4 text-center text-2xl font-bold md:text-4xl">
      Please Upload One Contract
    </h1>

    <DragNdrop
      files={files}
      setFiles={setFiles}
      width={"100%"}
      height={"100%"}
      acceptedFiles={".pdf,.docx,.doc,.xls,.xlsx"}
    />
    <div className="relative mt-10">
      <Button
        onClick={uploadFile}
        className="mt-10 rounded px-4 py-2 font-bold"
      >
        {isLoading ? "Uploading..." : "Upload Contract Files"}
      </Button>
    </div>
  </div>
);

Conclusion

This documentation provides an overview of the UploadedProposalGeneration and UploadContract components, their key features, state management, and critical functions. For further details, refer to the components’ source code in the project directory.