feat: added functions to take file, find fs doc using userID and to u…

…pdate it with file URL

src/components/form/uploadingFiles.js

@@ -14,6 +14,7 @@ export const toCloudinary = async imageFile => {
 		}
 
 		const data = await response.json();
+		console.log('uploaded file', data.secure_url);
 		return data.secure_url;
 	} catch (error) {
 		console.error('Error uploading image to Cloudinary:', error);

src/components/payment/Final.jsx

@@ -1,9 +1,23 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import { AuthContext } from '../../context/AuthContext';
 import { PaymentCont, SubmissionForm, UPI } from './Payment';
 import { Heading, Paragraph } from '../shared';
 import { Contactorg, Emaildata } from '../../data/paymentData';
+import { uploadReceipt } from './uploadReceipt';
+import { updateDocumentByUid } from '../../firebase/uploadProof';
 
 function Final() {
+	const { userInfo } = useContext(AuthContext);
+	var currentUser = userInfo[0];
+
+	const [file, setFile] = useState(null);
+
+	const uploadProof = async () => {
+		const proofURL = await uploadReceipt(file);
+		await updateDocumentByUid(currentUser.uid, proofURL);
+		await updateDocumentByUid(currentUser.uid, proofURL);
+	};
+
 	const [isUPI, setisUPI] = useState(true);
 
 	return (
@@ -51,7 +65,12 @@ function Final() {
 					{isUPI ? <PaymentCont /> : <UPI />}
 				</div>
 
-				<SubmissionForm />
+				<SubmissionForm
+					onSubmit={uploadProof}
+					onInput={e => {
+						setFile(e.target.files[0]);
+					}}
+				/>
 			</div>
 
 			<Heading variant='body3' className='text-primary-foreground flex justify-center'>

src/components/payment/Payment.jsx

@@ -51,20 +51,22 @@ export const UPI = () => {
 	);
 };
 
-export const SubmissionForm = () => {
+export const SubmissionForm = ({ onSubmit, onInput }) => {
 	return (
-		<div className=' py-8 flex flex-col items-center ' style={{ border: '1px solid red' }}>
+		<div className=' py-8 flex flex-col items-center '>
 			<input
 				type='file'
 				name='receipt'
 				className={
-					'border divide-solid border-[#FF7647] outline-none bg-inherit rounded-md my-1 my-6 text-[#B0B0B0] p-2 w-[470px]'
+					'border divide-solid border-[#FF7647] outline-none bg-white rounded-md my-1 my-6 text-[#B0B0B0] p-2 w-[470px]'
 				}
-				style={{ boxShadow: '2px 2px 0px 0px black' }}
+				style={{ boxShadow: '3px 3px 0px 0px black' }}
+				onChange={onInput}
 			/>
 			<button
-				className='border border-black bg-[#FF7647] text-black px-4 py-2 rounded-2xl m-6 w-[470px]'
-				style={{ boxShadow: '2px 2px 0px 0px black' }}>
+				className='border border-black bg-[#FF7647] text-black px-4 py-2 rounded-lg m-6 w-[470px]'
+				style={{ boxShadow: '3px 3px 0px 0px black' }}
+				onClick={onSubmit}>
 				<Paragraph variant='body3' className='inline mx-auto text-xl'>
 					Submit
 				</Paragraph>

src/components/payment/uploadReceipt.js

@@ -0,0 +1,25 @@
+// uploading to cloudinary
+export const uploadReceipt = async imageFile => {
+	try {
+		const formData = new FormData();
+		formData.append('file', imageFile);
+		formData.append('upload_preset', import.meta.env.VITE_PUBLIC_CLOUDINARY_RECEIPT_NAME);
+
+		const response = await fetch(import.meta.env.VITE_PUBLIC_CLOUDINARY_PRESET_URL, {
+			method: 'POST',
+			body: formData,
+		});
+
+		if (!response.ok) {
+			console.log('Failed to upload image:', response.statusText);
+			throw new Error(`Failed to upload image: ${response.statusText}`);
+		}
+
+		const data = await response.json();
+		console.log('uploaded file', data.secure_url);
+		return data.secure_url;
+	} catch (error) {
+		console.error('Error uploading image to Cloudinary:', error);
+		throw error;
+	}
+};

src/firebase/uploadProof.js

@@ -0,0 +1,24 @@
+import { collection, getDocs, query, updateDoc, where } from 'firebase/firestore';
+import { db } from './firebaseConfig';
+
+// add proofURL to the doc using uid
+export const updateDocumentByUid = async (userId, proofURL) => {
+	try {
+		const q = query(collection(db, 'users'), where('uid', '==', userId));
+		const querySnapshot = await getDocs(q);
+
+		if (!querySnapshot.empty) {
+			const userDoc = querySnapshot.docs[0];
+
+			// Update the document by adding proof of payment
+			await updateDoc(userDoc.ref, {
+				paymentProof: proofURL,
+			});
+		} else {
+			console.log('No documents found matching the name: ', userId);
+		}
+	} catch (error) {
+		console.error('Error updating document:', error);
+		throw error;
+	}
+};

src/pages/payment.jsx

@@ -1,8 +1,10 @@
 import Final from '../components/payment/Final.jsx';
+import NavBar from '../components/shared/NavBar';
 
 export default function Payment() {
 	return (
 		<>
+			<NavBar />
 			<Final />
 		</>
 	);