From 890b1d2d7abd541fce2c9a505b28d99b966d4d2c Mon Sep 17 00:00:00 2001
From: Srishty M <srishtymangutte@gmail.com>
Date: Mon, 15 Apr 2024 02:19:02 +0530
Subject: [PATCH] feat: added receipt submission form

---
 src/assets/images/receiptSubmit.png     | Bin 0 -> 3235 bytes
 src/components/payment/Final.jsx        |   8 +++++---
 src/components/payment/Payment.jsx      |  25 +++++++++++++++++++++++-
 src/components/payment/input.styles.css |  18 +++++++++++++++++
 src/components/payment/uploadReceipt.js |   0
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/receiptSubmit.png
 create mode 100644 src/components/payment/input.styles.css
 create mode 100644 src/components/payment/uploadReceipt.js

diff --git a/src/assets/images/receiptSubmit.png b/src/assets/images/receiptSubmit.png
new file mode 100644
index 0000000000000000000000000000000000000000..618c188c4a9adc5e76c3ed76c0f9db985f8b0087
GIT binary patch
literal 3235
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
V^iRRsG{pb_002ovPDHLkV1j~xIO_la

literal 0
HcmV?d00001

diff --git a/src/components/payment/Final.jsx b/src/components/payment/Final.jsx
index 589fc39..7f57ced 100644
--- a/src/components/payment/Final.jsx
+++ b/src/components/payment/Final.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { PaymentCont, UPI } from './Payment';
+import { PaymentCont, SubmissionForm, UPI } from './Payment';
 import { Heading, Paragraph } from '../shared';
 import { Contactorg, Emaildata } from '../../data/paymentData';
 
@@ -27,8 +27,8 @@ function Final() {
 					<Heading variant='h3' className='text-center lg:my-3'>
 						Payment method we have
 					</Heading>
-					<div className='bg-white text-black rounded-2xl border-[1.5px] border-solid border-black text-center flex flex-col lg:flex-row justify-center  w-auto'>
-						<div className='flex justify-center space-x-4 relative'>
+					<div className='bg-white text-black rounded-2xl border-[1.5px] border-solid border-black text-center flex flex-col lg:flex-row justify-center w-auto my-2'>
+						<div className='flex justify-center space-x-4 relative '>
 							<button
 								className={`px-6 py-1 rounded-2xl  ${isUPI ? 'border-2 border-black bg-orange-500 text-white' : 'bg-white text-black'}`}
 								onClick={() => {
@@ -50,6 +50,8 @@ function Final() {
 
 					{isUPI ? <PaymentCont /> : <UPI />}
 				</div>
+
+				<SubmissionForm />
 			</div>
 
 			<Heading variant='body3' className='text-primary-foreground flex justify-center'>
diff --git a/src/components/payment/Payment.jsx b/src/components/payment/Payment.jsx
index 4bc1989..2480a26 100644
--- a/src/components/payment/Payment.jsx
+++ b/src/components/payment/Payment.jsx
@@ -1,10 +1,11 @@
 import { Paragraph } from '../shared';
+import './input.styles.css';
 import { Paymentdata, UPIdata } from '../../data/paymentData';
 
 export const PaymentCont = () => {
 	return (
 		<>
-			<div className='container  px-4 lg:px-0 flex justify-center items-center	'>
+			<div className='container px-4 lg:px-0 flex justify-center items-center'>
 				<div className='p-4 w-full lg:w-3/4'>
 					<Paragraph variant='body3' className='text-center mb-8 lg:mb-4 mt-11'>
 						Preferred method: Transfer funds from your bank to our CURRENT account
@@ -49,3 +50,25 @@ export const UPI = () => {
 		</>
 	);
 };
+
+export const SubmissionForm = () => {
+	return (
+		<div className=' py-8 flex flex-col items-center ' style={{ border: '1px solid red' }}>
+			<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]'
+				}
+				style={{ boxShadow: '2px 2px 0px 0px black' }}
+			/>
+			<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' }}>
+				<Paragraph variant='body3' className='inline mx-auto text-xl'>
+					Submit
+				</Paragraph>
+			</button>
+		</div>
+	);
+};
diff --git a/src/components/payment/input.styles.css b/src/components/payment/input.styles.css
new file mode 100644
index 0000000..acc3e3b
--- /dev/null
+++ b/src/components/payment/input.styles.css
@@ -0,0 +1,18 @@
+input[type='file']::file-selector-button {
+	background-color: #ff7647;
+	background: url('https://res.cloudinary.com/djl2ulktr/image/upload/v1713122470/receiptSubmit_fhbpjx.png') no-repeat;
+	cursor: pointer;
+	color: rgba(0, 0, 0, 0);
+	border: none;
+	width: 490px;
+	padding: 0.2em;
+	margin: 0vw 0.3vw;
+	transition: 1s;
+
+	@media only screen and (max-width: 970px) {
+		width: 60px;
+	}
+	@media only screen and (max-width: 768px) {
+		width: 110px;
+	}
+}
diff --git a/src/components/payment/uploadReceipt.js b/src/components/payment/uploadReceipt.js
new file mode 100644
index 0000000..e69de29