Adds a field for giving tip while making payment

Author: pbteja1998

src/components/common/PaymentForm.tsx

@@ -15,11 +15,28 @@ interface Props {
   isPayment?: boolean;
 }
 
+interface FormState {
+  amount: number;
+  hours_spent: number;
+  hours_spent_cost: number;
+  tip: number;
+  email: string;
+  phone: string;
+  name: string;
+}
+
 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, hours_spent, email: '', phone: '', name: '' };
+  const maxAmount: number = campaign ? campaign.required_amount : Number.MAX_SAFE_INTEGER;
+  const amount: number = 100 > maxAmount ? maxAmount : 100;
+  const initialState: FormState = {
+    amount,
+    hours_spent: 2,
+    hours_spent_cost: amount,
+    tip: 0,
+    email: '',
+    phone: '',
+    name: '',
+  };
   const [form, setFormValue] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isModalOpen, toggleModal] = useState(false);
@@ -29,11 +46,22 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
     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;
+      const hours_spent_cost = hours_spent > 3 ? hours_spent * 30 : hours_spent * 50;
       return setFormValue(form => ({
         ...form,
         [e.target.name]: value,
-        'amount': cost < Number(maxAmount) ? cost : maxAmount,
+        hours_spent_cost: hours_spent_cost,
+        amount:
+          Number(form.tip) + hours_spent_cost < Number(maxAmount) ? Number(form.tip) + hours_spent_cost : maxAmount,
+      }));
+    }
+    if (e.target.name === 'tip') {
+      const tip = Number(value);
+      return setFormValue(form => ({
+        ...form,
+        [e.target.name]: value,
+        amount:
+          tip + Number(form.hours_spent_cost) < Number(maxAmount) ? tip + Number(form.hours_spent_cost) : maxAmount,
       }));
     }
     if (e.target.name === 'amount') {
@@ -45,7 +73,7 @@ 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, hours_spent: number }) {
+  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`);
     }
@@ -90,9 +118,11 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
       await openRzp({
         ...form,
         hours_spent: Number(form.hours_spent),
+        hours_spent_cost: Number(form.hours_spent_cost),
+        tip: Number(form.tip),
         amount: Number(form.amount),
         campaign: campaign ? campaign.slug : undefined,
-        isPayment
+        isPayment,
       });
       setIsSubmitting(false);
       setFormValue(initialState);
@@ -105,27 +135,52 @@ 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">{ isPayment ? 'Please make payment for hackerspace here' : '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}
-            />
+        {isPayment && (
+          <div className="mb-4 mt-4">
+            <label htmlFor="hours_spent" 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>
+        )}
+        {isPayment && (
+          <div className="mb-4 mt-4">
+            <label htmlFor="tip" className="text-sm text-gray-800 mb-1 block">
+              How much was the peer learning worth today?
+            </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="tip"
+                id="tip"
+                value={form.tip}
+                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>
@@ -199,7 +254,9 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
         <div className="flex justify-center mb-3">
           <Button type="submit" isLoading={isSubmitting} disabled={isSubmitting}>
             <IconCards width={27} height={22} />
-            <span className="ml-4 inline-block font-bold">{ isPayment ? 'Pay' : 'Contribute' } ₹ {finalAmount.toFixed(2)}</span>
+            <span className="ml-4 inline-block font-bold">
+              {isPayment ? 'Pay' : 'Contribute'} ₹ {finalAmount.toFixed(2)}
+            </span>
           </Button>
         </div>
         <p className="text-xs text-gray-600 text-center">
@@ -216,7 +273,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
           <PaymentSuccess />
         </div>
         <p className="text-center py-1 font-semibold text-xl text-pink-600">
-          Thanks for your {campaign ? 'contribution' :  isPayment ? 'payment' : 'donation'}.
+          Thanks for your {campaign ? 'contribution' : isPayment ? 'payment' : 'donation'}.
         </p>
         <p className="text-center text-sm text-gray-600">We truly appreciate your generosity :D</p>
       </Modal>

src/pages/api/rzp.ts

@@ -18,7 +18,18 @@ const razorpay = new Razorpay(rzpCredentials);
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { email, name, amount, hours_spent, phone, paymentMethod = 'Razorpay', campaign, isPayment } = req.body;
+    const {
+      email,
+      name,
+      amount,
+      hours_spent,
+      hours_spent_cost,
+      tip,
+      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
@@ -30,7 +41,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         phone,
         name,
         campaign,
-        isPayment
+        isPayment,
       },
     });
     if (campaign) {
@@ -49,14 +60,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
         { typecast: true }
       );
-    } else if(isPayment) {
+    } else if (isPayment) {
       await paymentsBase.create(
         {
           id,
           name,
           email,
           phone,
           hours_spent: Number(hours_spent),
+          hours_spent_cost: Number(hours_spent_cost),
+          tip: Number(tip),
           paid_amount: Number(amount),
           payment_method: paymentMethod,
           status: PaymentStatus.created,

src/services/airtable.ts

@@ -39,6 +39,8 @@ export interface Donation extends RZPPayment {
 export interface Payment extends RZPPayment {
   paid_amount: number;
   hours_spent: number;
+  hours_spent_cost: number;
+  tip: number;
 }
 
 export interface Funding extends Donation {

src/services/rzp.ts

@@ -6,6 +6,8 @@ interface RzpData {
   name: string;
   email: string;
   hours_spent: number;
+  hours_spent_cost: number;
+  tip: number;
   amount: number;
   phone: string;
   campaign?: string;
@@ -62,7 +64,7 @@ export async function openRzp(data: RzpData) {
               razorpay_order_id: order.id,
               status: 'failed',
               campaign: data.campaign,
-              isPayment: data.isPayment
+              isPayment: data.isPayment,
             });
             reject(new Error(`Payment widget is closed without completing payment. Please try again!`));
           },