Chore: Rebase

Author: Ardent10

.env.sample

@@ -6,10 +6,13 @@ GITHUB_CLIENT_SECRET='<YOUR_KEY>'
 GITHUB_CLIENT_ID='<YOUR_KEY>'
 DISCORD_CLIENT_ID='<YOUR_KEY>'
 DISCORD_CLIENT_SECRET='<YOUR_KEY>'
+RAZORPAY_ID=<your_razorpay_id>
+RAZORPAY_SECRET=<your_razorpay_secret>
+RAZORPAY_WEBHOOK_SECRET=<your_razorpay_webhook_secret>
 
 APP_NAME='http://localhost:3000'
 
 JWT_SECRET='<YOUR_KEY>'
 
 GMAIL_PASSWORD='<YOUR_KEY>'
-GMAIL_USER='<YOUR_KEY>'
+GMAIL_USER='<YOUR_KEY>'

.prettierrc

@@ -4,5 +4,7 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "semi": false,
-  "jsxSingleQuote": true
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+
 }

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@lucia-auth/adapter-prisma": "^4.0.1",
+    "@node-rs/argon2": "^1.8.3",
     "@prisma/client": "^5.18.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -54,6 +55,7 @@
     "oslo": "^1.2.1",
     "prettier": "^3.3.3",
     "prisma": "^5.18.0",
+    "razorpay": "^2.9.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
@@ -79,6 +81,7 @@
     "eslint-config-next": "14.2.5",
     "husky": "^9.1.4",
     "postcss": "^8",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

prisma/schema.prisma

@@ -25,6 +25,7 @@ model User {
   passwordReset      PasswordResetToken?
   examSubmissions    ExamSubmission[]
   ExamProgress       ExamProgress[]
+  payments           Payment[]
 
   @@map("users")
 }
@@ -100,6 +101,7 @@ model Exam {
   createdAt    DateTime         @default(now())
   updatedAt    DateTime         @updatedAt
   ExamProgress ExamProgress[]
+  payments     Payment[]
 
   @@map("exams")
 }
@@ -151,3 +153,19 @@ model ExamProgress {
 
   @@unique([examId, userId])
 }
+
+model Payment {
+  id        String   @id @default(cuid())
+  userId    String
+  examId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  exam      Exam     @relation(fields: [examId], references: [id], onDelete: Cascade)
+  amount    Int
+  status    String
+  orderId   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([userId, examId])
+  @@map("payments")
+}

src/app/(main)/(non-exam-section)/available-exams/page.tsx

@@ -1,8 +1,15 @@
 import AvailableExams from '@/components/exams/avaiable'
 import React, { useEffect } from 'react'
+import { validateRequest } from '@/auth'
+
 
 const Page = async () => {
-  return <AvailableExams />
+  const session = await validateRequest()
+  const user = session?.user
+
+  if (!user) return null
+
+  return <AvailableExams user={user} />
 }
 
 export default Page

src/app/api/order/create/route.ts

@@ -0,0 +1,46 @@
+import Razorpay from 'razorpay'
+import { NextRequest, NextResponse } from 'next/server'
+
+import { validateRequest } from '@/auth'
+import { z } from 'zod'
+
+const razorpayInstance = new Razorpay({
+  key_id: process.env.RAZORPAY_ID || '',
+  key_secret: process.env.RAZORPAY_SECRET || '',
+})
+
+const payloadSchema = z.object({
+  amount: z.string(),
+  currency: z.string(),
+})
+
+export async function POST(request: NextRequest) {
+  const session = await validateRequest()
+  const user = session?.user
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const payload = await request.json()
+  const { amount, currency } = payloadSchema.parse(payload)
+
+  const options = {
+    amount,
+    currency,
+    receipt: 'rcp1',
+  }
+
+  try {
+    const order = await razorpayInstance.orders.create(options)
+    return NextResponse.json(
+      {
+        id: order.id,
+        currency: order.currency,
+        amount: order.amount,
+      },
+      { status: 200 }
+    )
+  } catch (error) {
+    return NextResponse.json({ error }, { status: 500 })
+  }
+}

src/app/api/order/verify/route.ts

@@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { validateWebhookSignature } from 'razorpay/dist/utils/razorpay-utils'
+import { z } from 'zod'
+
+import db from '@/lib/db'
+
+const payloadSchema = z.object({
+  payment: z.object({
+    entity: z.object({
+      amount: z.number(),
+      id: z.string(),
+      notes: z.object({
+        userId: z.string(),
+        examId: z.string(),
+      }),
+      order_id: z.string(),
+      status: z.string(),
+    }),
+  }),
+})
+
+export async function POST(req: NextRequest) {
+  const jsonBody = await req.json()
+  const razorpay_signature: string | null = req.headers.get(
+    'X-Razorpay-Signature'
+  )
+
+  if (!razorpay_signature)
+    return NextResponse.json({ error: 'Signature not found' }, { status: 404 })
+
+  const isPaymentValid: boolean = validateWebhookSignature(
+    JSON.stringify(jsonBody),
+    razorpay_signature,
+    process.env.RAZORPAY_WEBHOOK_SECRET!
+  )
+
+  if (!isPaymentValid) {
+    return NextResponse.json(
+      { error: 'Payment not verified. Payment signature invalid' },
+      { status: 404 }
+    )
+  }
+  const {
+    payment: {
+      entity: {
+        amount,
+        id: paymentId,
+        notes: { userId, examId },
+        order_id,
+        status,
+      },
+    },
+  } = payloadSchema.parse(jsonBody.payload)
+
+  if (status !== 'authorized' && status !== 'captured') {
+    return NextResponse.json(
+      { error: 'Payment not authorized' },
+      { status: 404 }
+    )
+  }
+
+  try {
+    await db.payment.create({
+      data: {
+        amount,
+        examId,
+        id: paymentId,
+        orderId: order_id,
+        status,
+        userId,
+      },
+    })
+
+    return NextResponse.json(
+      { message: 'Purchase Successful' },
+      { status: 200 }
+    )
+  } catch (error) {
+    console.log(error)
+    return NextResponse.json({ error }, { status: 409 })
+  }
+}

src/app/globals.css

@@ -107,7 +107,6 @@ body {
   --bg-opacity: 0.5;
 }
 
-
 ::view-transition-group(root) {
   animation-duration: 0.7s;
   animation-timing-function: linear(
@@ -202,3 +201,10 @@ body {
     opacity: 0;
   }
 }
+/* required as there was a white background by default */
+.razorpay-container {
+  height: 70% !important;
+  max-width: 380px;
+  inset: 0;
+  margin: auto;
+}

src/app/layout.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import './globals.css'
+import NextTopLoader from 'nextjs-toploader'
+import { Toaster } from 'sonner'
+
 import { ThemeProvider } from '@/components/providers/theme-provider'
 import { ScrollToTopButton } from '@/components/global/scroll-to-top-button'
-import { Toaster } from 'sonner'
-import NextTopLoader from 'nextjs-toploader'
+
+import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 

src/components/exams/avaiable.tsx

@@ -3,11 +3,14 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { motion, useAnimation } from 'framer-motion'
+import { User } from 'lucia'
+import { useRazorpay } from '@/hooks/use-razorpay'
 import {
   Clock,
   CreditCard,
+   Loader2,
   FilePlus2,
   FileQuestion,
   Pencil,
@@ -39,8 +42,11 @@ type Exam = {
   price: number
 }
 
-export default function AvailableExams() {
-  const { exams, setExams } = useGlobalStore()
+export default function AvailableExams({ user }: { user: User }) {
+  const { exams, setExams } = useGlobalStore((state) => ({
+    exams: state.exams,
+    setExams: state.setExams,
+  }))
 
   const [selectedExam, setSelectedExam] = useState<Exam | null>(null)
   const [isCreateModalOpen, setCreateModalOpen] = useState(false)
@@ -50,6 +56,10 @@ export default function AvailableExams() {
   const [examToDelete, setExamToDelete] = useState<string | null>(null)
 
   const controls = useAnimation()
+  const router = useRouter()
+  const processPayment = useRazorpay()
+
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     controls.start((i) => ({
@@ -108,6 +118,21 @@ export default function AvailableExams() {
     return colors[index % colors.length]
   }
 
+  const handlePaymentSuccess = (examId: string) => {
+    router.push(`/take/${examId}`)
+  }
+
+  const handleTakeTestClick = (examId: string, amount: number) => async () => {
+    setIsLoading(true)
+    await processPayment({
+      amount,
+      examId,
+      successCallback: () => handlePaymentSuccess(examId),
+      user,
+    })
+    setIsLoading(false)
+  }
+
   return (
     <div className='min-h-screen w-full'>
       <div className='mx-auto px-4 py-12'>
@@ -120,7 +145,7 @@ export default function AvailableExams() {
             <h1 className='text-4xl font-bold text-foreground'>
               Available Exams
             </h1>
-            <p className='mt-2 text-lg text-muted-foreground max-w-2xl'>
+            <p className='mt-2 max-w-2xl text-lg text-muted-foreground'>
               Choose from our selection of professional exams to test and
               certify your skills.
             </p>
@@ -143,13 +168,13 @@ export default function AvailableExams() {
                 whileHover={{ y: -5, transition: { duration: 0.2 } }}
               >
                 <Card
-                  className={`h-full flex flex-col bg-gradient-to-br ${getGradientColor(
+                  className={`flex h-full flex-col bg-gradient-to-br ${getGradientColor(
                     index
-                  )} hover:shadow-lg transition-all duration-300 border border-secondary`}
+                  )} border border-secondary transition-all duration-300 hover:shadow-lg`}
                 >
                   <CardHeader>
                     <div className='flex justify-between'>
-                      <CardTitle className='text-xl mb-2'>
+                      <CardTitle className='mb-2 text-xl'>
                         {exam.title}
                       </CardTitle>
                       <div className='flex gap-2'>
@@ -171,29 +196,37 @@ export default function AvailableExams() {
                     <CardDescription>{exam.description}</CardDescription>
                   </CardHeader>
                   <CardContent className='flex-grow'>
-                    <div className='flex items-center mb-4 text-muted-foreground'>
+                    <div className='mb-4 flex items-center text-muted-foreground'>
                       <Clock className='mr-2 h-4 w-4' />
                       <span>{exam.duration} minutes</span>
                     </div>
-                    <div className='flex items-center mb-4 text-muted-foreground'>
+                    <div className='mb-4 flex items-center text-muted-foreground'>
                       <FileQuestion className='mr-2 h-4 w-4' />
                       <span>{exam.numQuestions} Questions</span>
                     </div>
-                    <div className='flex items-center text-foreground font-semibold'>
+                    <div className='flex items-center font-semibold text-foreground'>
                       <CreditCard className='mr-2 h-4 w-4' />
                       <span>INR {exam.price}</span>
                     </div>
                   </CardContent>
                   <CardFooter>
-                    <Button asChild className='w-full'>
-                      <Link href={`/take/${exam.id}`}>Take Test</Link>
+                    <Button
+                      className='w-full'
+                      disabled={isLoading}
+                      onClick={handleTakeTestClick(exam.id, exam.price)}
+                    >
+                      {isLoading ? (
+                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                      ) : (
+                        'Pay & Take Test'
+                      )}
                     </Button>
                   </CardFooter>
                 </Card>
               </motion.div>
             ))
           ) : (
-            <div className='flex flex-col h-96 justify-center items-center'>
+            <div className='flex h-96 flex-col items-center justify-center'>
               <Loader />
               Loading Exams...
             </div>