Submit Proposal
DocumentSelector Component Documentation
Overview
The DocumentSelector component allows users to review their uploaded contract and start the proposal generation process. It also lets users provide a name for their proposal and shows a download link once the proposal is generated.
Key Features
- Review Uploaded Contract: Allows users to review their uploaded contract.
- Proposal Name Input: Users can provide a name for their proposal.
- Start Proposal Generation: Initiates the proposal generation process and displays a download link upon completion.
Dependencies
- React: For building the component.
- Axios: For making API requests.
- Sonner: For displaying toast notifications.
State Management
Uses useState for managing proposal details, proposal name, and loading state.
const [proposal, setProposal] = useState<Proposal | null>(null);const [proposalName, setProposalName] = useState("");const [isLoading, setIsLoading] = useState(false);Start Proposal Generation
Handles the proposal generation process.
const startProposalGeneration = async () => { setIsLoading(true); if (proposalName.length === 0) return toast("Please provide a proposal name"); if (token) { try { const response = await axios.post( `${process.env.NEXT_PUBLIC_API_URL}/proposal-generation`, { downloadUrl, proposalName }, { headers: { Authorization: `Bearer ${token}`, }, } );
const generatedProposal = response.data; if (generatedProposal.message) { setIsLoading(false); return toast(generatedProposal.message); }
setProposal(generatedProposal); toast("Proposal Generated, you have also received it in your email"); } catch (error) { console.log(error); toast("An error occurred, Please try again later"); } } setIsLoading(false);};Rendering the Component
Displays the review section for the uploaded contract and initiates proposal generation.
return ( <div className="relative p-4"> {proposal ? ( <> <div className="my-8"> <h2>Click the link below to download your proposal</h2> <a href={proposal.downloadUrl} download target="_blank" className="text-blue-600 hover:text-blue-800 border-blue-600 hover:border-blue-800 block w-full rounded border px-3 py-2 underline transition-colors duration-200 ease-in-out" > {`${proposal.proposalTitle}`} </a> </div> </> ) : ( <> <h2 className="mt-15 text-3xl font-bold">Review Uploaded Contract</h2> <div className="mt-10"> {downloadUrl ? ( <div> <a href={downloadUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 border-blue-600 hover:border-blue-800 block w-full rounded border px-3 py-2 underline transition-colors duration-200 ease-in-out" > Uploaded Contract </a> <div className="mt-5"> <label>Provide a name for your proposal</label> <Input className="mt-3" onChange={(e) => setProposalName(e.target.value)} value={proposalName} /> </div> <Button onClick={startProposalGeneration} className="mt-10 w-full rounded px-4 py-2 text-center font-bold" > {isLoading ? "Generating proposal, this can take up to 4 minutes but you will receive it in your email when it's completed..." : "Start Proposal Generation"} </Button> </div> ) : ( <p>No contract uploaded.</p> )} </div> </> )} <div className="mt-4 flex justify-between"> <Button onClick={prev} className="absolute left-5 top-1"> Go Back </Button> </div> </div>);SubmitContract Component Documentation
Overview
The SubmitContract component allows users to generate a proposal based on a contract found in the database. It displays a download link once the proposal is generated.
Key Features
- Generate Proposal: Initiates the proposal generation process.
- Display Proposal: Shows a download link once the proposal is generated.
Dependencies
- React: For building the component.
- Axios: For making API requests.
- Sonner: For displaying toast notifications.
State Management
Uses useState for managing proposal details and loading state.
const [proposal, setProposal] = useState<Proposal | null>(null);const [isLoading, setIsLoading] = useState(false);Start Proposal Generation
Handles the proposal generation process.
const startProposalGeneration = async () => { setIsLoading(true);
if (token && contract) { try { const response = await axios.post( `${process.env.NEXT_PUBLIC_API_URL}/proposal-generation-find`, { contract }, { headers: { Authorization: `Bearer ${token}`, }, } );
const generatedProposal = response.data; if (generatedProposal.message) { setIsLoading(false); return toast(generatedProposal.message); }
setProposal(generatedProposal); toast("Proposal Generated, you have also received it in your email"); } catch (error) { toast("An error occurred, Please try again later"); } } setIsLoading(false);};Rendering the Component
Displays the section to start proposal generation and shows the download link once generated.
return ( <div className="relative"> {proposal ? ( <> <div className="pt-15"> <h2>Click the link below to download your proposal</h2> <a href={proposal.downloadUrl} download target="_blank" className="text-blue-600 hover:text-blue-800 border-blue-600 hover:border-blue-800 block w-full rounded border px-3 py-2 underline transition-colors duration-200 ease-in-out" > {`${proposal.proposalTitle}`} </a> </div> </> ) : ( <> <h2 className="mt-15 text-center text-3xl font-bold"> Click the button below to generate your proposal </h2> <Button onClick={startProposalGeneration} className="mt-10 w-full rounded px-4 py-2 text-center font-bold" > {isLoading ? "Generating proposal, this can take up to 4 minutes but you will receive it in your email when it's completed..." : "Start Proposal Generation"} </Button> </> )} <Button onClick={prev} className="absolute left-5 top-1"> Go Back </Button> </div>);Conclusion
This documentation provides an overview of the DocumentSelector and SubmitContract components, their key features, state management, and critical functions. For further details, refer to the components’ source code in the project directory.