From 511fa68d291ceb0d99009613221a55f98ac91cfa Mon Sep 17 00:00:00 2001 From: Ravi Rajput Date: Mon, 18 Mar 2024 14:29:27 +0530 Subject: [PATCH] Added popup while cancel subscription and fixed subscription status --- apps/web/app/account/billing/action.ts | 11 +-- .../billing/cancel-subscription-button.tsx | 80 ++++++++++++++++--- ...lemonsqueezy-start-subscription-button.tsx | 2 +- apps/web/app/account/billing/page.tsx | 27 +------ .../billing/resume-subscription-button.tsx | 24 +++--- apps/web/app/actions.ts | 7 +- .../app/payment/webhook/lemonsqueezy/route.ts | 9 +-- 7 files changed, 97 insertions(+), 63 deletions(-) diff --git a/apps/web/app/account/billing/action.ts b/apps/web/app/account/billing/action.ts index 483373ed..a146a09f 100644 --- a/apps/web/app/account/billing/action.ts +++ b/apps/web/app/account/billing/action.ts @@ -6,6 +6,7 @@ import UserModel from "@/models/user"; import { LEMONSQUEEZY_API_KEY } from "@/lib/constants"; import { error } from "@/utils/logger"; import { auth } from "@/auth"; +import { User } from "@medialit/models"; export async function cancelSubscription( prevState: Record, @@ -26,7 +27,7 @@ export async function cancelSubscription( await connectToDatabase(); - const user = await UserModel.findOne({ + const user: User | null = await UserModel.findOne({ email: session.user.email, }); @@ -35,7 +36,7 @@ export async function cancelSubscription( } const response = await fetch( - `https://api.lemonsqueezy.com/v1/subscriptions/${user.userId}`, + `https://api.lemonsqueezy.com/v1/subscriptions/${user.subscriptionId}`, { method: "DELETE", headers: { @@ -75,7 +76,7 @@ export async function resumeSubscription( await connectToDatabase(); - const user = await UserModel.findOne({ + const user: User | null = await UserModel.findOne({ email: session.user.email, }); @@ -84,7 +85,7 @@ export async function resumeSubscription( } const response = await fetch( - `https://api.lemonsqueezy.com/v1/subscriptions/${user.userId}`, + `https://api.lemonsqueezy.com/v1/subscriptions/${user.subscriptionId}`, { method: "PATCH", headers: { @@ -95,7 +96,7 @@ export async function resumeSubscription( body: JSON.stringify({ data: { type: "subscriptions", - id: user.userId, + id: user.subscriptionId, attributes: { cancelled: false, }, diff --git a/apps/web/app/account/billing/cancel-subscription-button.tsx b/apps/web/app/account/billing/cancel-subscription-button.tsx index fa7e101c..92bbfb22 100644 --- a/apps/web/app/account/billing/cancel-subscription-button.tsx +++ b/apps/web/app/account/billing/cancel-subscription-button.tsx @@ -3,9 +3,19 @@ import { Button } from "@/components/ui/button"; import { useFormState, useFormStatus } from "react-dom"; import { cancelSubscription } from "./action"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useToast } from "@/components/ui/use-toast"; import { useRouter } from "next/navigation"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, + DialogClose, +} from "@/components/ui/dialog"; export default function CancelSubscriptionButton({ subscriptionStatus, @@ -20,8 +30,11 @@ export default function CancelSubscriptionButton({ const { toast } = useToast(); const router = useRouter(); + const [open, setOpen] = useState(false); + useEffect(() => { if (formState.success) { + setOpen(false); toast({ title: "We are sorry to see you go", description: "Your subscription has been cancelled", @@ -37,14 +50,57 @@ export default function CancelSubscriptionButton({ }, [formState]); return ( -
- - Cancel subscription - -
+ <> + + + {currentPlan === "Basic" && + subscriptionStatus === "subscribed" ? ( + + ) : ( + + )} + + + {currentPlan === "Basic" && + subscriptionStatus === "subscribed" ? ( + <> + + Downgrade to free + + Are you sure, you want to cancel your current + subscription? + + ) : ( + <> + + Cancel subscription + + Are you sure, you want to Cancel subscription? + + )} + +
+ + + + + + + Yes! Cancel + + + +
+ + + ); } @@ -63,13 +119,13 @@ function Submit({ let className; if (currentPlan === "Basic" && subscriptionStatus === "subscribed") { - buttonText = "Downgrade to free"; - className = "bg-primary hover:bg-[#333333]"; + buttonText = "Yes! Cancel"; + className = "bg-red-500 hover:bg-red-700"; } return ( - ) : ( - - )} */} ); }; diff --git a/apps/web/app/account/billing/resume-subscription-button.tsx b/apps/web/app/account/billing/resume-subscription-button.tsx index 01edc39e..3983cd22 100644 --- a/apps/web/app/account/billing/resume-subscription-button.tsx +++ b/apps/web/app/account/billing/resume-subscription-button.tsx @@ -47,14 +47,16 @@ export default function ResumeSubscriptionButton({ Resume subscription -

- Expires at{" "} - {new Date(expiresAt).toLocaleDateString(undefined, { - day: "numeric", - month: "long", - year: "numeric", - })} -

+ {currentPlan !== "Basic" && subscriptionStatus === "cancelled" && ( +

+ Expires at{" "} + {new Date(expiresAt).toLocaleDateString(undefined, { + day: "numeric", + month: "long", + year: "numeric", + })} +

+ )} ); } @@ -73,8 +75,9 @@ function Submit({ let className; if (currentPlan === "Basic" && subscriptionStatus === "cancelled") { - buttonText = "Downgrade to free"; - className = "bg-primary hover:bg-[#333333]"; + buttonText = "Current plan"; + className = + "pointer-events-none w-full mb-6 bg-white hover:bg-white !text-muted-foreground border border-muted-foreground"; } return ( @@ -84,7 +87,6 @@ function Submit({ variant="secondary" disabled={status.pending} > - {/* {children} */} {buttonText} ); diff --git a/apps/web/app/actions.ts b/apps/web/app/actions.ts index 5eaffa29..eeaf57db 100644 --- a/apps/web/app/actions.ts +++ b/apps/web/app/actions.ts @@ -17,7 +17,7 @@ import { import { getUserFromSession } from "@/lib/user-handlers"; import { Apikey } from "@medialit/models"; import UserModel from "@/models/user"; -import User from "@medialit/models"; +import { User } from "@medialit/models"; export async function authenticate( prevState: Record, @@ -104,14 +104,13 @@ export async function getUser(): Promise { } export async function getSubscriber(): Promise | null> { const session: Session | null = await auth(); if (!session || !session.user) { diff --git a/apps/web/app/payment/webhook/lemonsqueezy/route.ts b/apps/web/app/payment/webhook/lemonsqueezy/route.ts index c23bc646..fea2775c 100644 --- a/apps/web/app/payment/webhook/lemonsqueezy/route.ts +++ b/apps/web/app/payment/webhook/lemonsqueezy/route.ts @@ -1,6 +1,6 @@ import { LEMONSQUEEZY_WEBHOOK_SECRET } from "@/lib/constants"; import UserModel from "@/models/user"; -import User from "@medialit/models"; +import { User } from "@medialit/models"; import { cookies } from "next/headers"; export async function GET() { @@ -16,9 +16,8 @@ export async function POST(request: Request, response: Response) { return Response.json({ success: false }); } - const user: any = await UserModel.findOne({ - // userId: event.meta.custom_data.subscriberId - userId: event.data.id, + const user: User | null = await UserModel.findOne({ + userId: event.meta.custom_data.userId, }); if (!user) { @@ -32,7 +31,7 @@ export async function POST(request: Request, response: Response) { ) { user.subscriptionMethod = "lemon"; user.customerId = event.data.attributes.customer_id; - user.userId = event.data.id; + user.subscriptionId = event.data.id; } user.subscriptionStatus = getSubscripiontStatus(event);