Adds hours spent field to payment form

Author: pbteja1998

src/components/common/PaymentForm.tsx

@@ -17,15 +17,25 @@ interface Props {
 
 export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = false, isPayment = false }) => {
   const maxAmount = campaign ? campaign.required_amount : Number.MAX_SAFE_INTEGER;
+  const hours_spent = 2;
   const amount = 100 > maxAmount ? maxAmount : 100;
-  const initialState = { amount, email: '', phone: '', name: '' };
+  const initialState = { amount, hours_spent, email: '', phone: '', name: '' };
   const [form, setFormValue] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isModalOpen, toggleModal] = useState(false);
   const finalAmount = getFinalAmount(form.amount);
   function onChange(e: ChangeEvent<HTMLInputElement>) {
     e.persist();
     const value = e.target.value;
+    if (e.target.name === 'hours_spent') {
+      const hours_spent = Number(value);
+      const cost = hours_spent > 3 ? hours_spent * 30 : hours_spent * 50;
+      return setFormValue(form => ({
+        ...form,
+        [e.target.name]: value,
+        'amount': cost < Number(maxAmount) ? cost : maxAmount,
+      }));
+    }
     if (e.target.name === 'amount') {
       return setFormValue(form => ({
         ...form,
@@ -35,8 +45,8 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
     setFormValue(form => ({ ...form, [e.target.name]: value }));
   }
 
-  function validateForm(form: { name: string; email: string; phone: string; amount: number }) {
-    if (!form.amount || !form.email || !form.phone || !form.name) {
+  function validateForm(form: { name: string; email: string; phone: string; amount: number, hours_spent: number }) {
+    if (!form.amount || !form.email || !form.phone || !form.name || !form.hours_spent) {
       return alert(`Please enter all required fields`);
     }
 
@@ -55,6 +65,10 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
       return `Enter a valid phone number`;
     }
 
+    if (Number(form.hours_spent) < 1) {
+      return alert(`Hours spent should be greater than or equal to 1`);
+    }
+
     if (Number(form.amount) < 1) {
       return alert(`Amount should be greater than or equal to 1`);
     }
@@ -75,6 +89,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
       setIsSubmitting(true);
       await openRzp({
         ...form,
+        hours_spent: Number(form.hours_spent),
         amount: Number(form.amount),
         campaign: campaign ? campaign.slug : undefined,
         isPayment
@@ -90,8 +105,27 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
 
   return (
     <div className={clsx(!inlineForm && 'px-4', inlineForm && 'md:px-0')}>
-      <p className="text-lg mb-4 text-gray-700 leading-relaxed">We truly appreciate your generosity</p>
+      <p className="text-lg mb-4 text-gray-700 leading-relaxed">{ isPayment ? 'Please make payment for hackerspace here' : 'We truly appreciate your generosity' }</p>
       <form name="payment" onSubmit={onSubmit}>
+        <div className="mb-4 mt-4">
+          <label htmlFor="amount" className="text-sm text-gray-800 mb-1 block">
+            Hours spent <sup className="text-red-500">*</sup>
+          </label>
+          <div>
+            <input
+              className="bg-white focus:outline-0 border border-gray-300 rounded py-2 px-2 block w-full appearance-none leading-normal"
+              type="number"
+              name="hours_spent"
+              id="hours_spent"
+              value={form.hours_spent}
+              onChange={onChange}
+              required
+              autoFocus={!inlineForm}
+              min="1"
+              disabled={isSubmitting}
+            />
+          </div>
+        </div>
         <div className="mb-4 mt-4">
           <label htmlFor="amount" className="text-sm text-gray-800 mb-1 block">
             Amount <sup className="text-red-500">*</sup>
@@ -107,7 +141,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
               required
               autoFocus={!inlineForm}
               min="1"
-              disabled={isSubmitting}
+              disabled={isSubmitting || isPayment}
             />
           </div>
         </div>

src/pages/api/rzp-status.ts

@@ -58,6 +58,9 @@ async function updateStateInAirtable({ razorpay_order_id, razorpay_payment_id, s
       .firstPage();
 
     if (!result) {
+      if (isPayment) {
+        return updatePaymentBase({ razorpay_order_id, ...data });
+      }
       return updateDonationBase({ razorpay_order_id, ...data });
     }
 

src/pages/api/rzp.ts

@@ -18,7 +18,7 @@ const razorpay = new Razorpay(rzpCredentials);
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { email, name, amount, phone, paymentMethod = 'Razorpay', campaign, isPayment } = req.body;
+    const { email, name, amount, hours_spent, phone, paymentMethod = 'Razorpay', campaign, isPayment } = req.body;
     const id = cuid();
     const data: { id: string; status: PaymentStatus } = await razorpay.orders.create({
       amount: getFinalAmount(Number(amount)) * 100, // in paise
@@ -56,6 +56,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           name,
           email,
           phone,
+          hours_spent: Number(hours_spent),
           paid_amount: Number(amount),
           payment_method: paymentMethod,
           status: PaymentStatus.created,

src/services/airtable.ts

@@ -38,6 +38,7 @@ export interface Donation extends RZPPayment {
 
 export interface Payment extends RZPPayment {
   paid_amount: number;
+  hours_spent: number;
 }
 
 export interface Funding extends Donation {

src/services/rzp.ts

@@ -5,6 +5,7 @@ import { getFinalAmount } from '../utils';
 interface RzpData {
   name: string;
   email: string;
+  hours_spent: number;
   amount: number;
   phone: string;
   campaign?: string;