Adds a separate form to pay for Coderplex

Author: pbteja1998

.gitignore

@@ -89,4 +89,10 @@ typings/
 .dynamodb/
 
 # package-lock
-package-lock.json
+package-lock.json
+
+# Now
+.now
+
+# Editor
+.idea

env.sample

@@ -5,5 +5,6 @@ RZP_LIVE_SECRET=
 AIRTABLE_KEY=
 AIRTABLE_BASE_ID=
 AIRTABLE__DONATIONS_TABLE_NAME=Donations
+AIRTABLE__PAYMENTS_TABLE_NAME=Payments
 AIRTABLE__CAMPAIGN_TABLE_NAME=Campaigns
-AIRTABLE__FUNDING_TABLE_NAME=Funding
+AIRTABLE__FUNDING_TABLE_NAME=Funding

now.json

@@ -11,6 +11,7 @@
     "AIRTABLE_KEY": "@airtable_key",
     "AIRTABLE_BASE_ID": "@airtable_base_id",
     "AIRTABLE__DONATIONS_TABLE_NAME": "@airtable__donations_table_name",
+    "AIRTABLE__PAYMENTS_TABLE_NAME": "@airtable__payments_table_name",
     "AIRTABLE__FUNDING_TABLE_NAME": "@airtable__funding_table_name",
     "AIRTABLE__CAMPAIGN_TABLE_NAME": "@airtable__campaign_table_name"
   },

src/components/Home/index.tsx

@@ -30,6 +30,12 @@ export const HomeContent = () => {
           <span className="inline-block ml-2">Make A Donation</span>
         </Button>
       </div>
+      <div className="p-4 flex justify-center">
+        <Button href="/pay">
+          <EmojiIcon />
+          <span className="inline-block ml-2">Make A Payment</span>
+        </Button>
+      </div>
     </div>
   );
 };

src/components/common/PaymentForm.tsx

@@ -12,9 +12,10 @@ import clsx from 'clsx';
 interface Props {
   campaign?: CampaignWithFundings;
   inlineForm?: boolean;
+  isPayment?: boolean;
 }
 
-export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = false }) => {
+export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = false, isPayment = false }) => {
   const maxAmount = campaign ? campaign.required_amount : Number.MAX_SAFE_INTEGER;
   const amount = 100 > maxAmount ? maxAmount : 100;
   const initialState = { amount, email: '', phone: '', name: '' };
@@ -76,6 +77,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
         ...form,
         amount: Number(form.amount),
         campaign: campaign ? campaign.slug : undefined,
+        isPayment
       });
       setIsSubmitting(false);
       setFormValue(initialState);
@@ -163,7 +165,7 @@ 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">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">
@@ -180,7 +182,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' : '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-status.ts

@@ -1,7 +1,14 @@
 import crypto from 'crypto';
 import { NextApiRequest, NextApiResponse } from 'next';
 
-import { donationsBase, Views, fundingsBase, campaignsBase, PaymentStatus } from '../../services/airtable';
+import {
+  donationsBase,
+  paymentsBase,
+  Views,
+  fundingsBase,
+  campaignsBase,
+  PaymentStatus
+} from '../../services/airtable';
 
 const RZP_SECRET = process.env.NODE_ENV === 'development' ? process.env.RZP_TEST_SECRET : process.env.RZP_LIVE_SECRET;
 
@@ -31,7 +38,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 }
 
-async function updateStateInAirtable({ razorpay_order_id, razorpay_payment_id, status, campaign }) {
+async function updateStateInAirtable({ razorpay_order_id, razorpay_payment_id, status, campaign, isPayment }) {
   const query = {
     filterByFormula: `{order_id} = "${razorpay_order_id}"`,
     view: Views.grid,
@@ -70,11 +77,27 @@ async function updateStateInAirtable({ razorpay_order_id, razorpay_payment_id, s
         donations_count: result.fields.donations_count + 1,
       }),
     ]);
+  } else if(isPayment) {
+    return updatePaymentBase({ razorpay_order_id, ...data })
   }
 
   return updateDonationBase({ razorpay_order_id, ...data });
 }
 
+async function updatePaymentBase({ razorpay_order_id, status, payment_id = '' }) {
+  const [record] = await paymentsBase
+    .select({
+      filterByFormula: `{order_id} = "${razorpay_order_id}"`,
+      view: Views.grid,
+    })
+    .firstPage();
+  if (!record.id) {
+    return;
+  }
+  return paymentsBase.update(record.id, { status, payment_id });
+}
+
+
 async function updateDonationBase({ razorpay_order_id, status, payment_id = '' }) {
   const [record] = await donationsBase
     .select({

src/pages/api/rzp.ts

@@ -2,7 +2,7 @@ import Razorpay from 'razorpay';
 import cuid from 'cuid';
 import { NextApiRequest, NextApiResponse } from 'next';
 
-import { donationsBase, PaymentStatus, fundingsBase } from '../../services/airtable';
+import { donationsBase, PaymentStatus, fundingsBase, paymentsBase } from '../../services/airtable';
 import { getFinalAmount } from '../../utils';
 
 const RZP_KEY = process.env.NODE_ENV === 'development' ? process.env.RZP_TEST_KEY : process.env.RZP_LIVE_KEY;
@@ -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 } = req.body;
+    const { email, name, amount, 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,6 +30,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         phone,
         name,
         campaign,
+        isPayment
       },
     });
     if (campaign) {
@@ -48,6 +49,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
         { typecast: true }
       );
+    } else if(isPayment) {
+      await paymentsBase.create(
+        {
+          id,
+          name,
+          email,
+          phone,
+          paid_amount: Number(amount),
+          payment_method: paymentMethod,
+          status: PaymentStatus.created,
+          order_id: data.id,
+          created_at: new Date().toISOString(),
+        },
+        { typecast: true }
+      );
     } else {
       await donationsBase.create(
         {

src/pages/pay.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Link from 'next/link';
+import { BackIcon } from '../components/Icons/common';
+
+import { SEO } from '../components/SEO';
+import { PaymentForm } from '../components/common/PaymentForm';
+
+export default function DonatePage() {
+  return (
+    <>
+      <SEO title="Pay to Coderplex Technologies" />
+      <div className="pb-20 md:pb-0 md:max-w-3xl mx-auto">
+        <header>
+          <Link href="/">
+            <a className="p-4 inline-block">
+              <BackIcon />
+            </a>
+          </Link>
+        </header>
+        <PaymentForm isPayment={true} />
+      </div>
+    </>
+  );
+}

src/services/airtable.ts

@@ -4,6 +4,7 @@ const airtableCredentials = {
   key: process.env.AIRTABLE_KEY,
   baseId: process.env.AIRTABLE_BASE_ID,
   donationsTableName: process.env.AIRTABLE__DONATIONS_TABLE_NAME,
+  paymentsTableName: process.env.AIRTABLE__PAYMENTS_TABLE_NAME,
   campaignsTableName: process.env.AIRTABLE__CAMPAIGN_TABLE_NAME,
   fundingsTableName: process.env.AIRTABLE__FUNDING_TABLE_NAME,
 };
@@ -19,19 +20,26 @@ export enum PaymentStatus {
   failed = 'captured',
 }
 
-export interface Donation {
+export interface RZPPayment {
   id: string;
   name: string;
   email: string;
   phone: string;
-  donated_amount: number;
   payment_method: string;
   created_at: string;
   order_id: string;
   payment_id?: string;
   status: PaymentStatus;
 }
 
+export interface Donation extends RZPPayment {
+  donated_amount: number;
+}
+
+export interface Payment extends RZPPayment {
+  paid_amount: number;
+}
+
 export interface Funding extends Donation {
   campaign: string;
 }
@@ -58,8 +66,10 @@ export interface CampaignWithFundings extends Campaign {
 export interface CampaignRow extends Airtable.FieldSet, Campaign {}
 export interface FundingRow extends Airtable.FieldSet, Funding {}
 export interface DonationRow extends Airtable.FieldSet, Donation {}
+export interface PaymentRow extends Airtable.FieldSet, Payment {}
 
 const base = new Airtable({ apiKey: airtableCredentials.key }).base(airtableCredentials.baseId);
 export const donationsBase = base(airtableCredentials.donationsTableName) as Airtable.Table<DonationRow>;
+export const paymentsBase = base(airtableCredentials.paymentsTableName) as Airtable.Table<PaymentRow>;
 export const campaignsBase = base(airtableCredentials.campaignsTableName) as Airtable.Table<CampaignRow>;
 export const fundingsBase = base(airtableCredentials.fundingsTableName) as Airtable.Table<FundingRow>;

src/services/rzp.ts

@@ -8,6 +8,7 @@ interface RzpData {
   amount: number;
   phone: string;
   campaign?: string;
+  isPayment?: boolean;
 }
 
 async function getOrderId(data: RzpData) {
@@ -48,7 +49,7 @@ export async function openRzp(data: RzpData) {
         image: CODERPLEX_LOGO,
         handler: async (res: RzpResponse) => {
           try {
-            await updateStatus({ ...res, status: 'captured', campaign: data.campaign });
+            await updateStatus({ ...res, status: 'captured', campaign: data.campaign, isPayment: data.isPayment });
             resolve();
           } catch (error) {
             reject(error);
@@ -60,6 +61,7 @@ export async function openRzp(data: RzpData) {
               razorpay_order_id: order.id,
               status: 'failed',
               campaign: data.campaign,
+              isPayment: data.isPayment
             });
             reject(new Error(`Payment widget is closed without completing payment. Please try again!`));
           },