From 868ca34b6869fe54145fb8cb8635b090bb059a37 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:11:19 +0000 Subject: [PATCH 1/9] CheckoutButton --- app/(root)/events/[id]/page.tsx | 5 ++++- components/shared/CheckoutButton.tsx | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 components/shared/CheckoutButton.tsx diff --git a/app/(root)/events/[id]/page.tsx b/app/(root)/events/[id]/page.tsx index d3f8846..914f618 100644 --- a/app/(root)/events/[id]/page.tsx +++ b/app/(root)/events/[id]/page.tsx @@ -1,4 +1,5 @@ // import CheckoutButton from '@/components/shared/CheckoutButton'; +import CheckoutButton from "@/components/shared/CheckoutButton"; import Collection from "@/components/shared/Collection"; import { getEventById, @@ -51,7 +52,9 @@ const EventDetails = async ({

- CheckoutButton + + +
{ + return
CheckoutButton
; +}; + +export default CheckoutButton; From 7f643179dc953351196036506dd0c0ad8f7838b3 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:20:55 +0000 Subject: [PATCH 2/9] update CheckoutButton --- components/shared/CheckoutButton.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/components/shared/CheckoutButton.tsx b/components/shared/CheckoutButton.tsx index 31f356b..6b7aeb7 100644 --- a/components/shared/CheckoutButton.tsx +++ b/components/shared/CheckoutButton.tsx @@ -1,7 +1,25 @@ +"use client"; + +import { SignedIn, SignedOut } from "@clerk/nextjs"; import React from "react"; +import { Button } from "../ui/button"; +import Link from "next/link"; const CheckoutButton = () => { - return
CheckoutButton
; + return ( +
+ + + + + + {/* */} + Checkout + +
+ ); }; export default CheckoutButton; From be086f70a95ac2dbc96e542753cc16a92dc6dad8 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:27:13 +0000 Subject: [PATCH 3/9] fix and add props --- components/shared/Checkout.tsx | 8 ++++++++ components/shared/CheckoutButton.tsx | 12 ++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 components/shared/Checkout.tsx diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx new file mode 100644 index 0000000..cbc5b76 --- /dev/null +++ b/components/shared/Checkout.tsx @@ -0,0 +1,8 @@ +import { IEvent } from "@/lib/database/models/event.model"; +import React from "react"; + +const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => { + return
Checkout
; +}; + +export default Checkout; diff --git a/components/shared/CheckoutButton.tsx b/components/shared/CheckoutButton.tsx index 6b7aeb7..b8c3af1 100644 --- a/components/shared/CheckoutButton.tsx +++ b/components/shared/CheckoutButton.tsx @@ -1,11 +1,16 @@ "use client"; -import { SignedIn, SignedOut } from "@clerk/nextjs"; +import { SignedIn, SignedOut, useUser } from "@clerk/nextjs"; import React from "react"; import { Button } from "../ui/button"; import Link from "next/link"; +import Checkout from "./Checkout"; +import { IEvent } from "@/lib/database/models/event.model"; + +const CheckoutButton = ({ event }: { event: IEvent }) => { + const { user } = useUser(); + const userId = user?.publicMetadata.userId as string; -const CheckoutButton = () => { return (
@@ -15,8 +20,7 @@ const CheckoutButton = () => { - {/* */} - Checkout +
); From e87a8f0b6ab907712fa238d810f2dfb0a71a9847 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:36:57 +0000 Subject: [PATCH 4/9] update --- components/shared/Checkout.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx index cbc5b76..fef453e 100644 --- a/components/shared/Checkout.tsx +++ b/components/shared/Checkout.tsx @@ -1,8 +1,15 @@ import { IEvent } from "@/lib/database/models/event.model"; import React from "react"; +import { Button } from "../ui/button"; const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => { - return
Checkout
; + return ( +
+ +
+ ); }; export default Checkout; From ad1dace7e5a0d7f7bdca413b62d29e09a28e15d2 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:38:51 +0000 Subject: [PATCH 5/9] pass in the props for CheckoutButton --- app/(root)/events/[id]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(root)/events/[id]/page.tsx b/app/(root)/events/[id]/page.tsx index 914f618..72d2422 100644 --- a/app/(root)/events/[id]/page.tsx +++ b/app/(root)/events/[id]/page.tsx @@ -53,7 +53,7 @@ const EventDetails = async ({
- +
From a48d8c317b08cbf42a3120405829c53e9b34ce83 Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Sun, 28 Jul 2024 09:30:20 +0000 Subject: [PATCH 6/9] update Checkout --- components/shared/Checkout.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx index fef453e..b10bcd8 100644 --- a/components/shared/Checkout.tsx +++ b/components/shared/Checkout.tsx @@ -1,12 +1,24 @@ +import { checkoutOrder } from "@/lib/actions/order.actions"; import { IEvent } from "@/lib/database/models/event.model"; -import React from "react"; import { Button } from "../ui/button"; const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => { + const onCheckout = async () => { + const order = { + eventTitle: event.title, + eventId: event._id, + price: event.price, + isFree: event.isFree, + buyerId: userId, + }; + + await checkoutOrder(order); + }; + return ( -
+
); From d7eb7404ce7b10c3fa862d79173033afb2ccc37b Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Sun, 28 Jul 2024 09:37:15 +0000 Subject: [PATCH 7/9] useEffect to check the status of checkout order --- components/shared/Checkout.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx index b10bcd8..b595211 100644 --- a/components/shared/Checkout.tsx +++ b/components/shared/Checkout.tsx @@ -1,8 +1,22 @@ import { checkoutOrder } from "@/lib/actions/order.actions"; import { IEvent } from "@/lib/database/models/event.model"; import { Button } from "../ui/button"; +import { useEffect } from "react"; const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => { + useEffect(() => { + const query = new URLSearchParams(window.location.search); + if (query.get("success")) { + console.log("Order placed! You will receive an email confirmation."); + } + + if (query.get("canceled")) { + console.log( + "Order canceled -- continue to shop around and checkout when you’re ready.", + ); + } + }, []); + const onCheckout = async () => { const order = { eventTitle: event.title, From e1333ce306e04cfe780226e6c19aa71fea66313a Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Sun, 28 Jul 2024 11:55:29 +0000 Subject: [PATCH 8/9] loadStripe in Checkout Component --- components/shared/Checkout.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx index b595211..5348e61 100644 --- a/components/shared/Checkout.tsx +++ b/components/shared/Checkout.tsx @@ -1,7 +1,11 @@ -import { checkoutOrder } from "@/lib/actions/order.actions"; +import React, { useEffect } from "react"; +import { loadStripe } from "@stripe/stripe-js"; + import { IEvent } from "@/lib/database/models/event.model"; import { Button } from "../ui/button"; -import { useEffect } from "react"; +import { checkoutOrder } from "@/lib/actions/order.actions"; + +loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => { useEffect(() => { From 3a94f647cfcb4a159c1ab750769d1b2a5db06e1b Mon Sep 17 00:00:00 2001 From: DevMirza <53424436+Zaid-maker@users.noreply.github.com> Date: Sun, 28 Jul 2024 16:43:09 +0000 Subject: [PATCH 9/9] reminder --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index d606cc0..c854edf 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ # logo Build an event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe. + +`ngrok tunnel --label edge=edghts_2jQbAk4QzC90ArEGm4eYkVIhI1v http://localhost:3000`