add gig page and stripe

package.json

@@ -58,6 +58,7 @@
     "react-whatsapp": "^0.3.0",
     "sass": "^1.76.0",
     "sharp": "^0.33.4",
+    "stripe": "^17.5.0",
     "swiper": "^11.1.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

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

@@ -0,0 +1,9 @@
+
+import { createStripeCheckout } from '@/lib/stripe/stripe';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const { gigId } = await request.json();
+  const url = await createStripeCheckout(gigId);
+  return NextResponse.json({ url });
+}

src/app/api/stripe/verify/page.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { stripe } from '@/lib/stripe/stripe';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const sessionId = searchParams.get('session_id');
+
+  if (!sessionId) {
+    return NextResponse.json({ success: false }, { status: 400 });
+  }
+
+  try {
+    const session = await stripe.checkout.sessions.retrieve(sessionId);
+
+    if (session.payment_status === 'paid') {
+      return NextResponse.json({ success: true, session });
+    } else {
+      return NextResponse.json({ success: false }, { status: 400 });
+    }
+  } catch (error) {
+    return NextResponse.json({ success: false }, { status: 500 });
+  }
+}

src/app/gigs/_utils/components/data/gig-list-data.tsx

@@ -0,0 +1,12 @@
+import { T__Gig } from "../types/gigs-data-types";
+
+export const GigsData: T__Gig[] = [
+  {
+    id: 1,
+    title: "Web Development",
+    description: "I will build a modern website for your business",
+    price: 50,
+    fiverrLink: "https://fiverr.com/your-gig",
+    image: "/web-dev.jpg",
+  },
+];

src/app/gigs/_utils/components/gig-card.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import Link from "next/link";
+import { T__Gig } from "../types/gigs-data-types";
+
+export default function GigCard({ gig }: { gig: T__Gig }) {
+  return (
+    <div className="border rounded-lg overflow-hidden shadow-lg">
+      <img
+        src={gig.image}
+        alt={gig.title}
+        className="w-full h-48 object-cover"
+      />
+      <div className="p-4">
+        <h2 className="text-xl font-semibold mb-2">{gig.title}</h2>
+        <p className="text-gray-600 mb-4">{gig.description}</p>
+        <div className="flex justify-between items-center">
+          <span className="text-lg font-bold">${gig.price}</span>
+          <div className="space-x-2">
+            <Link
+              href={gig.fiverrLink}
+              className="bg-green-500 text-white px-4 py-2 rounded"
+            >
+              Buy on Fiverr
+            </Link>
+            <button
+              onClick={() => handleStripePurchase(gig.id)}
+              className="bg-blue-500 text-white px-4 py-2 rounded"
+            >
+              Buy with Stripe
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+async function handleStripePurchase(gigId: number) {
+  try {
+    const response = await fetch("/api/create", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ gigId }),
+    });
+
+    const { url } = await response.json();
+    window.location.href = url;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}

src/app/gigs/_utils/components/gig-list.tsx

@@ -0,0 +1,13 @@
+import { T__Gig } from "../types/gigs-data-types";
+import { GigsData } from "./data/gig-list-data";
+import GigCard from "./gig-card";
+
+export default function GigList() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {GigsData.map((gig: T__Gig) => (
+        <GigCard key={gig.id} gig={gig} />
+      ))}
+    </div>
+  );
+}

src/app/gigs/_utils/types/gigs-data-types.ts

@@ -0,0 +1,8 @@
+export type T__Gig = {
+    id: number,
+    title: string,
+    description: string,
+    price: number,
+    fiverrLink: string,
+    image: string,
+  }

src/app/gigs/page.tsx

@@ -0,0 +1,10 @@
+import GigList from './_utils/components/gig-list';
+
+export default function GigsPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8">My Fiverr Gigs</h1>
+      <GigList />
+    </div>
+  );
+}

src/app/gigs/payment-verify/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+export default function PaymentVerificationPage() {
+  const searchParams = useSearchParams();
+  const [paymentStatus, setPaymentStatus] = useState("verifying");
+
+  useEffect(() => {
+    const sessionId = searchParams.get("session_id");
+    const success = searchParams.get("success");
+
+    if (sessionId && success) {
+      verifyPayment(sessionId);
+    } else {
+      setPaymentStatus("invalid");
+    }
+  }, [searchParams]);
+
+  async function verifyPayment(sessionId: string) {
+    try {
+      const response = await fetch(
+        `/api/verify-payment?session_id=${sessionId}`
+      );
+      const data = await response.json();
+
+      if (data.success) {
+        setPaymentStatus("success");
+        // You can show order details here
+      } else {
+        setPaymentStatus("failed");
+      }
+    } catch (error) {
+      setPaymentStatus("error");
+    }
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {paymentStatus === "verifying" && <p>Verifying payment...</p>}
+      {paymentStatus === "success" && <p>Payment successful!</p>}
+      {paymentStatus === "failed" && (
+        <p>Payment verification failed. Please contact support.</p>
+      )}
+      {paymentStatus === "invalid" && (
+        <p>Invalid session. Please contact support.</p>
+      )}
+      {paymentStatus === "error" && (
+        <p>Error verifying payment. Please contact support.</p>
+      )}
+    </div>
+  );
+}

src/lib/stripe/stripe.ts

@@ -0,0 +1,33 @@
+import { GigsData } from '@/app/gigs/_utils/components/data/gig-list-data';
+import Stripe from 'stripe';
+
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function createStripeCheckout(gigId: number) {
+  const gig = GigsData.find(g => g.id === gigId);
+  const metadata = {
+    userId: "test_user_43634563",
+    gigId: gigId.toString(),
+  }
+
+  const session = await stripe.checkout.sessions.create({
+    payment_method_types: ['card'],
+    line_items: [{
+      price_data: {
+        currency: 'usd',
+        product_data: {
+          name: gig.title,
+        },
+        unit_amount: gig.price * 100,
+      },
+      quantity: 1,
+    }],
+    mode: 'payment',
+    metadata,
+    payment_intent_data: { metadata },
+    success_url: `${process.env.NEXT_PUBLIC_URL}/gigs/payment-verify?success=true`,
+    cancel_url: `${process.env.NEXT_PUBLIC_URL}/gigs/payment-verify?success=false`,
+  });
+
+  return session.url;
+}