Added popup while cancel subscription and fixed subscription status

codelitdev · Mar 18, 2024 · 511fa68 · 511fa68
1 parent f474dbd
commit 511fa68
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 63 deletions.
diff --git 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<string, unknown>,
@@ -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
@@ -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 (
-        <form action={formAction}>
-            <Submit
-                currentPlan={currentPlan}
-                subscriptionStatus={subscriptionStatus}
-            >
-                Cancel subscription
-            </Submit>
-        </form>
+        <>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    {currentPlan === "Basic" &&
+                    subscriptionStatus === "subscribed" ? (
+                        <Button className="bg-primary hover:bg-[#333333]">
+                            Downgrade to free
+                        </Button>
+                    ) : (
+                        <Button className="bg-red-600 hover:bg-red-700">
+                            Cancel subscription
+                        </Button>
+                    )}
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                    {currentPlan === "Basic" &&
+                    subscriptionStatus === "subscribed" ? (
+                        <>
+                            <DialogHeader>
+                                <DialogTitle>Downgrade to free</DialogTitle>
+                            </DialogHeader>
+                            Are you sure, you want to cancel your current
+                            subscription?
+                        </>
+                    ) : (
+                        <>
+                            <DialogHeader>
+                                <DialogTitle>Cancel subscription</DialogTitle>
+                            </DialogHeader>
+                            Are you sure, you want to Cancel subscription?
+                        </>
+                    )}
+
+                    <form action={formAction}>
+                        <DialogFooter>
+                            <DialogClose asChild>
+                                <Button>Nevermind</Button>
+                            </DialogClose>
+                            <DialogClose asChild>
+                                <Submit
+                                    currentPlan={currentPlan}
+                                    subscriptionStatus={subscriptionStatus}
+                                >
+                                    Yes! Cancel
+                                </Submit>
+                            </DialogClose>
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }
 
@@ -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 (
         <Button
-            className={`bg-red-500 hover:bg-red-700 w-full text-white ${className}`}
+            className={`bg-red-500 hover:bg-red-700 text-white ${className}`}
             type="submit"
             variant="secondary"
             disabled={status.pending}

diff --git a/apps/web/app/account/billing/lemonsqueezy-start-subscription-button.tsx b/apps/web/app/account/billing/lemonsqueezy-start-subscription-button.tsx
@@ -78,7 +78,7 @@ export default function LemonSqueezyStartSubscriptionButton({
                 if (!session) {
                     router.push("/login");
                 } else {
-                    const url = `https://${storeId}.lemonsqueezy.com/checkout/buy/${productId}?checkout[email]=${session.user?.email}&checkout[custom][subscriberId]=${userId}&embed=1`;
+                    const url = `https://${storeId}.lemonsqueezy.com/checkout/buy/${productId}?checkout[email]=${session.user?.email}&checkout[custom][userId]=${userId}&embed=1`;
                     (window as any).LemonSqueezy.Url.Open(url);
                 }
             }}

diff --git a/apps/web/app/account/billing/page.tsx b/apps/web/app/account/billing/page.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 import { CheckIcon } from "@radix-ui/react-icons";
-import { Button } from "@/components/ui/button";
 import {
     LEMONSQUEEZY_STORE_ID,
     LEMONSQUEEZY_PRODUCT_ID,
@@ -11,6 +10,7 @@ import ResumeSubscriptionButton from "./resume-subscription-button";
 import { auth } from "@/auth";
 import { getSubscriber } from "@/app/actions";
 import { redirect } from "next/navigation";
+import { User } from "@medialit/models";
 
 const pricingPlans = [
     {
@@ -53,7 +53,7 @@ export const PricingPane = async ({
     isSecondary = false,
 }: PricingPaneProps) => {
     const session = await auth();
-    const user: any = await getSubscriber();
+    const user: User | null = await getSubscriber();
 
     if (!user) {
         return redirect("/404");
@@ -100,7 +100,6 @@ export const PricingPane = async ({
                                           : "w-full"
                                   }
                               >
-                                  {/* {user.subscriptionStatus === "subscribed" ? "Downgrade to free" : "Current plan"} */}
                                   {user.subscriptionStatus === "not-subscribed"
                                       ? "Current plan "
                                       : "Downgrade to free"}
@@ -140,28 +139,6 @@ export const PricingPane = async ({
                     expiresAt={user.subscriptionEndsAfter}
                 />
             )}
-
-            {/* {name === "Basic" ? (
-                <Button
-                    className={
-                        isSecondary
-                            ? " w-full bg-white hover:bg-white !text-primary border border-muted-foreground mt-6 justify-center"
-                            : "w-full"
-                    }
-                >
-                    Current Plan
-                </Button>
-            ) : (
-                <Button
-                    className={
-                        isSecondary
-                            ? " w-full bg-white hover:bg-white !text-primary border border-muted-foreground mt-6 justify-center"
-                            : "w-full"
-                    }
-                >
-                    Subscribe
-                </Button>
-            )} */}
         </div>
     );
 };

diff --git 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
             </Submit>
 
-            <p className="text-center text-sm text-slate-500">
-                Expires at{" "}
-                {new Date(expiresAt).toLocaleDateString(undefined, {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                })}
-            </p>
+            {currentPlan !== "Basic" && subscriptionStatus === "cancelled" && (
+                <p className="text-center text-sm text-slate-500">
+                    Expires at{" "}
+                    {new Date(expiresAt).toLocaleDateString(undefined, {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                    })}
+                </p>
+            )}
         </form>
     );
 }
@@ -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}
         </Button>
     );

diff --git 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<string, unknown>,
@@ -104,14 +104,13 @@ export async function getUser(): Promise<any | null> {
 }
 
 export async function getSubscriber(): Promise<Pick<
-    // User,
-    any,
+    User,
     | "email"
+    | "active"
     | "userId"
     | "email"
     | "subscriptionEndsAfter"
     | "subscriptionStatus"
-    | "subscribedToUpdates"
 > | 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
@@ -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);