feat: add Clerk sign-in modal for unauthenticated pricing page

Author: yashmakhija

apps/web/components/subscription/PlanCard.tsx

@@ -3,6 +3,8 @@ import { Card } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { CheckIcon } from "lucide-react";
 import { useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { SignInButton } from "@clerk/nextjs";
 
 interface PlanCardProps {
   plan: {
@@ -17,16 +19,23 @@ interface PlanCardProps {
 
 export function PlanCard({ plan, onSelect }: PlanCardProps) {
   const [isAnnual, setIsAnnual] = useState(false);
+  const [isLoading] = useState(false);
+  const { isAuthenticated } = useAuth();
   const annualPrice = Math.round(plan.price * 12 * 0.8); // 20% discount
 
+  const handleSelectPlan = async () => {
+    if (isLoading) return;
+    if (isAuthenticated) {
+      onSelect(isAnnual);
+    }
+  };
+
   return (
     <Card className="p-8 rounded-2xl shadow-xl transition-all duration-300 ease-out hover:shadow-md hover:shadow-purple-600/50 border border-gray-200 dark:border-gray-700 transform hover:scale-102 hover:brightness-110">
-      {/* Plan Name */}
       <h2 className="text-3xl font-extrabold mb-4 text-gray-900 dark:text-white">
         {plan.name}
       </h2>
 
-      {/* Pricing & Toggle */}
       <div className="flex items-center justify-between mb-6">
         <span className="text-4xl font-bold text-gray-900 dark:text-white">
           ${isAnnual ? annualPrice : plan.price}
@@ -42,7 +51,6 @@ export function PlanCard({ plan, onSelect }: PlanCardProps) {
         </div>
       </div>
 
-      {/* Features List */}
       <ul className="mb-6 space-y-2">
         {plan.features.map((feature) => (
           <li
@@ -55,13 +63,21 @@ export function PlanCard({ plan, onSelect }: PlanCardProps) {
         ))}
       </ul>
 
-      {/* Select Plan Button */}
-      <Button
-        className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 text-white font-medium tracking-wide shadow-lg transition-all hover:scale-105 hover:shadow-xl dark:from-blue-500 dark:to-blue-400"
-        onClick={() => onSelect(isAnnual)}
-      >
-        Select Plan
-      </Button>
+      {isAuthenticated ? (
+        <Button
+          className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 text-white font-medium tracking-wide shadow-lg transition-all hover:scale-105 hover:shadow-xl dark:from-blue-500 dark:to-blue-400"
+          onClick={handleSelectPlan}
+          disabled={isLoading}
+        >
+          {isLoading ? "Loading..." : "Select Plan"}
+        </Button>
+      ) : (
+        <SignInButton mode="modal">
+          <Button className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 text-white font-medium tracking-wide shadow-lg transition-all hover:scale-105 hover:shadow-xl dark:from-blue-500 dark:to-blue-400">
+            Sign in to Select
+          </Button>
+        </SignInButton>
+      )}
     </Card>
   );
 }