Initial Commit

app/(platform)/(dashboard)/organization/[organizationId]/billing/_components/subscription-button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { toast } from "sonner";
+
+import { stripeRedirect } from "@/actions/stripe-redirect";
+import { Button } from "@/components/ui/button";
+import { useAction } from "@/hooks/use-action";
+import { useProModal } from "@/hooks/use-pro-modal";
+
+interface SubscriptionButtonProps {
+  isPro: boolean;
+}
+
+export const SubscriptionButton = ({ isPro }: SubscriptionButtonProps) => {
+  const proModal = useProModal();
+
+  const { execute, isLoading } = useAction(stripeRedirect, {
+    onSuccess: (data) => {
+      window.location.href = data;
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onClick = () => {
+    if (isPro) {
+      execute({});
+    } else {
+      proModal.onOpen();
+    }
+  };
+
+  return (
+    <Button disabled={isLoading} onClick={onClick} variant="primary">
+      {isPro ? "Manage Subscription" : "Upgrade to Pro"}
+    </Button>
+  );
+};

app/(platform)/(dashboard)/organization/[organizationId]/billing/page.tsx

@@ -0,0 +1,19 @@
+import { checkSubscription } from "@/lib/subscription";
+import { Separator } from "@/components/ui/separator";
+
+import { Info } from "../_components/info";
+import { SubscriptionButton } from "./_components/subscription-button";
+
+const BillingPage = async () => {
+  const isPro = await checkSubscription();
+
+  return (
+    <div className="w-full">
+      <Info isPro={isPro} />
+      <Separator className="my-2" />
+      <SubscriptionButton isPro={isPro} />
+    </div>
+  );
+};
+
+export default BillingPage;