Fixed payment issue while verifying payment success

Author: KanadShee-18

app/(authenticated)/dashboard/page.tsx

@@ -8,10 +8,7 @@ import { currentUser } from "@clerk/nextjs/server";
 import { PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import {
-  hasReachedUploadLimit,
-  UploadLimitResponse,
-} from "@/lib/user";
+import { hasReachedUploadLimit, UploadLimitResponse } from "@/lib/user";
 import { UploadLimitReached } from "./upload-limit";
 import {
   MotionDiv,
@@ -89,8 +86,15 @@ export default async function DashboardPage() {
           </div>
 
           <MotionDiv
-            variants={itemVariants}
-            initial="hidden"
+            // variants={itemVariants}
+            initial={{ opacity: 0, x: -300 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{
+              duration: 0.6,
+              type: "spring",
+              stiffness: 70,
+              // damping: 35,
+            }}
             animate="visible"
             className="mb-6"
           >

app/api/verify-payment/route.ts

@@ -51,8 +51,10 @@ export async function POST(req: NextRequest) {
       // Insert into payment table
       const newPlan = order_amount === 99 ? "basic" : "pro";
 
+      console.log("Customer email is: ", customer_email);
+
       await sql`
-      INSERT INTO payments (cashfree_payment_id, amount, status, price_id,  user_email, created_at, updated_at)
+      INSERT INTO payments (cashfree_payment_id, amount, status, price_id, user_email, created_at, updated_at)
       VALUES (${order_id}, ${order_amount}, 'SUCCESS', ${newPlan}, ${customer_email}, NOW(), NOW())`;
 
       await sql`

app/globals.css

@@ -4,6 +4,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@property --border-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
 @theme {
   --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -45,6 +51,14 @@
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-rotate-border: border-rotate 4s linear infinite;
+
+  @keyframes border-rotate {
+    to {
+      --border-angle: 360deg;
+    }
+  }
 }
 
 /*
@@ -195,3 +209,91 @@
 .animate-gradient-x {
   animation: gradient-x 3s ease infinite;
 }
+
+/* .aiSummaryBadge {
+  position: relative;
+  padding: 5px 8px;
+  border-radius: 8px;
+  background-color: white/80;
+}
+
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.aiSummaryBadge::after,
+.aiSummaryBadge::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background-image: conic-gradient(from var(--angle), transparent 70%, blue);
+  border-radius: 12px;
+  z-index: -1;
+  animation: 3s spin linear infinite;
+}
+
+.aiSummaryBadge::before {
+  filter: blur(1.5rem);
+  opacity: 0.5;
+}
+
+@keyframes spin {
+  from {
+    --angle: 0deg;
+  }
+  to {
+    --angle: 360deg;
+  }
+} */
+
+.aiSummaryBadge {
+  position: relative;
+  padding: 5px 8px;
+  border-radius: 8px;
+  background-color: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* Corrected the background color */
+  overflow: hidden; /* Ensure the pseudo-elements don't overflow the badge */
+}
+
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.aiSummaryBadge::after,
+.aiSummaryBadge::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background-image: conic-gradient(from var(--angle), transparent 70%, blue);
+  border-radius: 12px;
+  z-index: -1;
+  animation: 3s spin linear infinite;
+}
+
+.aiSummaryBadge::before {
+  filter: blur(1.5rem);
+  opacity: 0.5;
+}
+
+@keyframes spin {
+  from {
+    --angle: 0deg;
+  }
+  to {
+    --angle: 360deg;
+  }
+}

components/common/header-section.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import { NavLink } from "./nav-links";
 import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
 import { UserPlanBadge } from "@/components/common/plan-badge";
+import { BadgeIndianRupee, BookOpen, Upload, User } from "lucide-react";
 
 export const Header = () => {
   return (
@@ -14,28 +15,49 @@ export const Header = () => {
             width={150}
             height={100}
             quality={100}
+            unoptimized
           />
         </NavLink>
       </div>
       <div className="flex lg:justify-center lg:items-center gap-4 lg:gap-12 lg:flex-1">
-        <NavLink href={"/#pricing"}>Pricing</NavLink>
+        <NavLink href={"/#pricing"}>
+          <span className="flex items-center gap-1">
+            <BadgeIndianRupee className="!size-4" />
+            Pricing
+          </span>
+        </NavLink>
         <SignedIn>
-          <NavLink href={"/dashboard"}>Your Summaries</NavLink>
+          <NavLink href={"/dashboard"}>
+            <span className="flex items-center gap-1">
+              <BookOpen className="!size-4" />
+              Your Summaries
+            </span>
+          </NavLink>
         </SignedIn>
       </div>
 
       <div className="flex lg:justify-end">
         <SignedIn>
           <div className="flex gap-2 items-center">
-            <NavLink href={"/upload"}>Upload a PDF</NavLink>
+            <NavLink href={"/upload"}>
+              <span className="flex items-center gap-1">
+                <Upload className="!size-4" />
+                Upload a PDF
+              </span>
+            </NavLink>
             <UserPlanBadge />
             <SignedIn>
               <UserButton />
             </SignedIn>
           </div>
         </SignedIn>
         <SignedOut>
-          <NavLink href={"/sign-in"}>Sign In</NavLink>
+          <NavLink href={"/sign-in"}>
+            <span className="flex items-center gap-1">
+              <User className="!size-4" />
+              Sign In
+            </span>
+          </NavLink>
         </SignedOut>
       </div>
     </nav>

components/common/nav-links.tsx

@@ -18,7 +18,7 @@ export const NavLink = ({ href, children, className }: NavLinkProps) => {
     <Link
       href={href}
       className={cn(
-        "text-sm transition-colors text-gray-600 hover:text-rose-500",
+        "text-sm font-medium transition-colors text-gray-600 hover:text-rose-500",
         className,
         isActive && "text-rose-500"
       )}

components/summary/source-information.tsx

@@ -19,7 +19,7 @@ export const SourceInfo = ({
     <div className="flex flex-col lg:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
       <div className="flex items-center justify-center gap-2">
         <FileText className="!size-4 text-rose-400" />
-        <span>Source: {fileName}</span>
+        <span className="font-medium">Source: {fileName}</span>
       </div>
       <div className="flex gap-2">
         <Button
@@ -33,7 +33,7 @@ export const SourceInfo = ({
             View Original
           </a>
         </Button>
-        <DownloadSummaryButton 
+        <DownloadSummaryButton
           fileName={fileName}
           title={title}
           summaryText={summaryText}

components/summary/summary-download.tsx

@@ -42,7 +42,7 @@ Generated by Saaransh
   return (
     <Button
       size={"sm"}
-      className="h-8 px-3 bg-rose-100 text-rose-600 hover:bg-rose-50 hover:text-rose-700 hover:shadow-md"
+      className="h-8 px-3 bg-rose-100 text-rose-600 hover:bg-rose-50 hover:text-rose-700 hover:shadow-md transition-all duration-300"
       onClick={handleSummaryDownload}
     >
       <Download className="!size-4 mr-1" />

components/summary/summary-headersection.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Calendar, ChevronLeftIcon, Clock, Sparkles } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
 
 export const SummaryHeader = ({
   title,
@@ -15,14 +14,15 @@ export const SummaryHeader = ({
   return (
     <div className="flex gap-4 mb-4 justify-between">
       <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-4">
-          <Badge
-            variant={"secondary"}
-            className="relative px-4 py-1.5 text-sm font-medium bg-white/80 backdrop-blur-xs rounded-full hover:bg-white/90 transition-all duration-200 shadow-xs hover:shadow-md"
-          >
-            <Sparkles className="!size-4 mr-1.5 text-rose-500 animate-pulse" />
-            AI Summary
-          </Badge>
+        <div className="flex flex-wrap items-center gap-4 text-sm ml-3">
+          <div className="transition-all duration-300 hover:scale-105 cursor-pointer">
+            <div className="p-0.5 animate-rotate-border bg-conic/[from_var(--border-angle)] from-emerald-400 via-rose-400 to-emerald-400 rounded-lg">
+              <span className="w-fit rounded-lg bg-white flex gap-1 items-center text-slate-700 font-semibold px-2 py-1">
+                <Sparkles className="!size-4 mr-1.5 text-rose-500 animate-pulse" />
+                AI Summary
+              </span>
+            </div>
+          </div>
           <div className="flex items-center gap-1.5 text-xs sm:text-sm text-muted-foreground">
             <Calendar className="!size-4 text-rose-400" />
             {new Date(createdAt).toLocaleDateString("en-US", {

components/upload/upload-form.tsx

@@ -35,7 +35,9 @@ export const UploadForm = () => {
 
   const { startUpload } = useUploadThing("pdfUploader", {
     onClientUploadComplete: () => {
-      toast.message("PDFUploaded successfully!");
+      toast.message(
+        <span className="text-rose-400">Pdf Uploaded successfully!</span>
+      );
     },
     onUploadError: (err) => {
       toast.error("Error occurred while uploading!", {
@@ -99,13 +101,16 @@ export const UploadForm = () => {
       // call the AI service
       const formattedFileName = formatFileNameAsTitle(file.name);
 
-      toast.message(<span className="text-indigo-500">🔍 Parsing PDF</span>, {
-        description: (
-          <span className="text-rose-400 font-medium">
-            We are parsing your PDF, this may take a few seconds
-          </span>
-        ),
-      });
+      toast.message(
+        <span className="text-indigo-500">🔍 Parsing Content From PDF</span>,
+        {
+          description: (
+            <span className="text-rose-400 font-medium">
+              We are parsing content from your PDF, this may take a few seconds
+            </span>
+          ),
+        }
+      );
 
       const result = await generatePdfText({
         fileUrl: resp[0].serverData.file.url,

lib/user.ts

@@ -4,7 +4,7 @@ export const getPriceIdByEmail = async (email: string) => {
   const sql = await getDatabaseConnection();
 
   const query =
-    await sql`SELECT price_id FROM users where email = ${email} AND status = 'active'`;
+    await sql`SELECT price_id FROM users where email = ${email} AND status = 'active' ORDER BY created_at DESC LIMIT 1`;
 
   return query?.[0]?.price_id || null;
 };

next.config.ts

@@ -2,9 +2,6 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  images: {
-    unoptimized: true,
-  },
 };
 
 export default nextConfig;