switching to stripes customer portal (#772)

ee/pages/api/integrations/stripepayment/portal.ts

@@ -0,0 +1,59 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import stripe from "@ee/lib/stripe/server";
+
+import { getSession } from "@lib/auth";
+import prisma from "@lib/prisma";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "POST") {
+    // Check that user is authenticated
+    const session = await getSession({ req });
+
+    if (!session) {
+      res.status(401).json({ message: "You must be logged in to do this" });
+      return;
+    }
+
+    // Get user
+    const user = await prisma.user.findUnique({
+      where: {
+        id: session.user?.id,
+      },
+      select: {
+        email: true,
+        name: true,
+      },
+    });
+
+    if (!user?.email)
+      return res.status(404).json({
+        message: "User email not found",
+      });
+
+    /**
+     * TODO: We need to find a better way to get our users customer id from Stripe,
+     * since the email is not an unique field in Stripe and we don't save them
+     * in our DB as of now.
+     **/
+    const customersReponse = await stripe.customers.list({
+      email: user?.email || "",
+      limit: 1,
+    });
+
+    const [customer] = customersReponse.data;
+
+    if (!customer?.id)
+      return res.status(404).json({
+        message: "Stripe customer id not found",
+      });
+
+    const return_url = `${process.env.NEXT_PUBLIC_APP_URL}/settings/billing`;
+    const stripeSession = await stripe.billingPortal.sessions.create({
+      customer: customer.id,
+      return_url,
+    });
+
+    res.redirect(stripeSession.url);
+  }
+}

pages/api/integrations/stripepayment/portal.ts

@@ -0,0 +1 @@
+export { default } from "@ee/pages/api/integrations/stripepayment/portal";

pages/settings/billing.tsx

@@ -1,8 +1,11 @@
+import { GetServerSidePropsContext } from "next";
+
 import { getSession } from "@lib/auth";
 import prisma from "@lib/prisma";
 
 import SettingsShell from "@components/Settings";
 import Shell from "@components/Shell";
+import Button from "@components/ui/Button";
 
 export default function Billing() {
   return (
@@ -10,10 +13,9 @@ export default function Billing() {
       <SettingsShell>
         <div className="py-6 lg:pb-8 lg:col-span-9">
           <div className="my-6">
-            <iframe
+            <form method="POST" action="/api/integrations/stripepayment/portal">
-              src="https://cal.com/subscription-embed"
+              <Button type="submit">Manage billing</Button>
-              style={{ minHeight: 800, width: "100%", border: 0 }}
+            </form>
-            />
           </div>
         </div>
       </SettingsShell>
@@ -21,7 +23,7 @@ export default function Billing() {
   );
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   const session = await getSession(context);
   if (!session) {
     return { redirect: { permanent: false, destination: "/auth/login" } };