feat(saas): Switch subscription modal

alifarooq9 · Apr 14, 2024 · 6a353c7 · 6a353c7
1 parent a0e889a
commit 6a353c7
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 23 deletions.
diff --git a/starterkits/saas/src/app/(app)/(user)/org/billing/_components/available-plans.tsx b/starterkits/saas/src/app/(app)/(user)/org/billing/_components/available-plans.tsx
@@ -1,5 +1,5 @@
-import { SubscribeBtn } from "@/app/(app)/(user)/org/billing/_components/subscribe-btn";
-import { Button } from "@/components/ui/button";
+import { SwitchPlanModal } from "@/app/(app)/(user)/org/billing/_components/switch-plan-modal";
+import { buttonVariants } from "@/components/ui/button";
 import {
     Card,
     CardContent,
@@ -65,34 +65,50 @@ export function AvailablePlans({ subscription }: AvailablePlansProps) {
                             </ul>
 
                             {plan.id === subscription?.plan?.id ? (
-                                <Button
-                                    variant="outline"
-                                    disabled
-                                    className="w-full"
+                                <div
+                                    className={buttonVariants({
+                                        className: "w-full ",
+                                        variant: "outline",
+                                    })}
                                 >
                                     Current Plan
-                                </Button>
+                                </div>
                             ) : (
                                 plan.variantId && (
                                     <div className="flex w-full flex-col gap-2">
-                                        <SubscribeBtn
-                                            variant={"outline"}
+                                        <SwitchPlanModal
+                                            cardBrand={
+                                                subscription?.card_brand ?? ""
+                                            }
+                                            lastCardDigits={
+                                                subscription?.card_last_four ??
+                                                ""
+                                            }
+                                            currencyCode={plan.currency.code}
+                                            currencySymbol={
+                                                plan.currency.symbol
+                                            }
+                                            planName={plan.title}
+                                            price={plan.price.monthly}
                                             variantId={plan.variantId?.monthly}
-                                            className="w-full"
-                                        >
-                                            Switch to {plan.currency.symbol}
-                                            {plan.price.monthly}{" "}
-                                            {plan.currency.code} per month
-                                        </SubscribeBtn>
-                                        <SubscribeBtn
-                                            variant={"outline"}
+                                        />
+
+                                        <SwitchPlanModal
+                                            cardBrand={
+                                                subscription?.card_brand ?? ""
+                                            }
+                                            lastCardDigits={
+                                                subscription?.card_last_four ??
+                                                ""
+                                            }
+                                            currencyCode={plan.currency.code}
+                                            currencySymbol={
+                                                plan.currency.symbol
+                                            }
+                                            planName={plan.title}
+                                            price={plan.price.yearly}
                                             variantId={plan.variantId?.yearly}
-                                            className="w-full"
-                                        >
-                                            Switch to {plan.currency.symbol}
-                                            {plan.price.yearly}{" "}
-                                            {plan.currency.code} per year
-                                        </SubscribeBtn>
+                                        />
                                     </div>
                                 )
                             )}

diff --git a/starterkits/saas/src/app/(app)/(user)/org/billing/_components/switch-plan-modal.tsx b/starterkits/saas/src/app/(app)/(user)/org/billing/_components/switch-plan-modal.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { SubscribeBtn } from "@/app/(app)/(user)/org/billing/_components/subscribe-btn";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+type SwitchPlanModalProps = {
+    variantId: number | undefined;
+    lastCardDigits: string;
+    cardBrand: string;
+    currencySymbol: string;
+    price: number;
+    currencyCode: string;
+    planName: string;
+};
+
+export function SwitchPlanModal({
+    cardBrand,
+    currencyCode,
+    currencySymbol,
+    lastCardDigits,
+    planName,
+    price,
+    variantId,
+}: SwitchPlanModalProps) {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <AlertDialog open={isOpen} onOpenChange={(o) => setIsOpen(o)}>
+            <AlertDialogTrigger asChild>
+                <Button variant="outline" className="w-full">
+                    Switch to {currencySymbol}
+                    {price} {currencyCode} per month
+                </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>
+                        Are you sure you want to switch to the {planName} plan?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        You will be charged the pro-rated amount for the rest of
+                        plan. Your billing card brand{" "}
+                        <strong className="capitalize">{cardBrand}</strong>{" "}
+                        ending in <strong>{lastCardDigits}</strong> will be
+                        charged.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <SubscribeBtn variantId={variantId}>Continue</SubscribeBtn>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}
diff --git a/starterkits/saas/src/server/actions/plans/mutations.ts b/starterkits/saas/src/server/actions/plans/mutations.ts
@@ -143,6 +143,7 @@ export async function changePlan(
         // @ts-expect-error -- null is a valid value for pause
         pause: null,
         cancelled: false,
+
     });
 
     // Save in db