Convert to use Next.js app directory (vercel#183)

* Update package.json

* working on migrate to app directory

* work

* working fairly well

* mucho work

* kill useUser

* getting close

* should be good

* cleanup

* fixes

* webhook fix

-removing server action for now
-also fixed lifetime interval insertion/update

* more fixes

-revert schema.sql changes
-remove prettier config
-remove esling config
-remove automatic tax in stripe
-fix subscription query return

* update to auth-helpers-nextjs v0.7

-server action to update name

Author: dalkommatt

app/account/ManageSubscriptionButton.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import Button from '@/components/ui/Button';
+import { postData } from '@/utils/helpers';
+
+import { Session } from '@supabase/supabase-js';
+
+interface Props {
+  session: Session;
+}
+
+export default function ManageSubscriptionButton({ session }: Props) {
+  const redirectToCustomerPortal = async () => {
+    try {
+      const { url } = await postData({
+        url: '/api/create-portal-link'
+      });
+      window.location.assign(url);
+    } catch (error) {
+      if (error) return alert((error as Error).message);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
+      <p className="pb-4 sm:pb-0">Manage your subscription on Stripe.</p>
+      <Button
+        variant="slim"
+        disabled={!session}
+        onClick={redirectToCustomerPortal}
+      >
+        Open customer portal
+      </Button>
+    </div>
+  );
+}

app/account/page.tsx

@@ -0,0 +1,167 @@
+import { ReactNode } from 'react';
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache'
+import Link from 'next/link';
+import {
+  getSession,
+  getUserDetails,
+  getSubscription
+} from '@/app/supabase-server';
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
+import ManageSubscriptionButton from './ManageSubscriptionButton';
+import Button from '@/components/ui/Button';
+import { Database } from '@/types_db';
+
+export default async function Account() {
+  const session = await getSession();
+  const user = session?.user;
+  const userDetails = await getUserDetails();
+  const subscription = await getSubscription();
+
+  if (!session) {
+    redirect('/signin');
+  }
+
+  const subscriptionPrice =
+    subscription &&
+    new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: subscription?.prices?.currency,
+      minimumFractionDigits: 0
+    }).format((subscription?.prices?.unit_amount || 0) / 100);
+
+  const updateName = async (formData: FormData) => {
+    'use server'
+
+    const newName = formData.get('name')
+    const supabase = createServerActionClient<Database>({ cookies })
+    const session = await getSession();
+    const user = session?.user;
+    const { error } = await supabase.from('users').update({ full_name: newName }).eq('id', user?.id)
+    if (error) {
+      console.log(error)
+    }
+    revalidatePath('/account')
+  }
+
+  const updateEmail = async (formData: FormData) => {
+    'use server'
+
+    const newEmail = formData.get('email')
+    const supabase = createServerActionClient<Database>({ cookies })
+    const { error } = await supabase.auth.updateUser({ email: newEmail })
+    if (error) {
+      console.log(error)
+    }
+    revalidatePath('/account')
+  }
+
+  return (
+    <section className="mb-32 bg-black">
+      <div className="max-w-6xl px-4 py-8 mx-auto sm:px-6 sm:pt-24 lg:px-8">
+        <div className="sm:align-center sm:flex sm:flex-col">
+          <h1 className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl">
+            Account
+          </h1>
+          <p className="max-w-2xl m-auto mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl">
+            We partnered with Stripe for a simplified billing.
+          </p>
+        </div>
+      </div>
+      <div className="p-4">
+        <Card
+          title="Your Plan"
+          description={
+            subscription
+              ? `You are currently on the ${subscription?.prices?.products?.name} plan.`
+              : 'You are not currently subscribed to any plan.'
+          }
+          footer={<ManageSubscriptionButton session={session} />}
+        >
+          <div className="mt-8 mb-4 text-xl font-semibold">
+            {subscription ? (
+              `${subscriptionPrice}/${subscription?.prices?.interval}`
+            ) : (
+              <Link href="/">Choose your plan</Link>
+            )}
+          </div>
+        </Card>
+        <Card
+          title="Your Name"
+          description="Please enter your full name, or a display name you are comfortable with."
+          footer={
+            <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
+              <p className="pb-4 sm:pb-0">64 characters maximum</p>
+              <Button variant="slim" type="submit" form="nameForm" disabled={true}>
+                {/* WARNING - In Next.js 13.4.x server actions are in alpha and should not be used in production code! */}
+                Update Name
+              </Button>
+            </div>
+          }
+        >
+          <div className="mt-8 mb-4 text-xl font-semibold">
+            <form id="nameForm" action={updateName}>
+              <input
+                type="text"
+                name="name"
+                className="w-1/2 p-3 rounded-md bg-zinc-800"
+                defaultValue={userDetails?.full_name}
+                placeholder="Your name"
+                maxLength={64}
+              />
+            </form>
+          </div>
+        </Card>
+        <Card
+          title="Your Email"
+          description="Please enter the email address you want to use to login."
+          footer={
+            <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
+              <p className="pb-4 sm:pb-0">We will email you to verify the change.</p>
+              <Button variant="slim" type="submit" form="emailForm" disabled={true}>
+                {/* WARNING - In Next.js 13.4.x server actions are in alpha and should not be used in production code! */}
+                Update Email
+              </Button>
+            </div>
+          }
+        >
+          <div className="mt-8 mb-4 text-xl font-semibold">
+            <form id="emailForm" action={updateEmail}>
+              <input
+                type="text"
+                name="email"
+                className="w-1/2 p-3 rounded-md bg-zinc-800"
+                defaultValue={user ? user.email : ""}
+                placeholder="Your email"
+                maxLength={64}
+              />
+            </form>
+          </div>
+        </Card>
+      </div>
+    </section>
+  );
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  footer?: ReactNode;
+  children: ReactNode;
+}
+
+function Card({ title, description, footer, children }: Props) {
+  return (
+    <div className="w-full max-w-3xl m-auto my-8 border rounded-md p border-zinc-700">
+      <div className="px-5 py-4">
+        <h3 className="mb-1 text-2xl font-medium">{title}</h3>
+        <p className="text-zinc-300">{description}</p>
+        {children}
+      </div>
+      <div className="p-4 border-t rounded-b-md border-zinc-700 bg-zinc-900 text-zinc-500">
+        {footer}
+      </div>
+    </div>
+  );
+}

app/api/create-checkout-session/route.ts

@@ -0,0 +1,97 @@
+import { cookies, headers } from 'next/headers';
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { stripe } from '@/utils/stripe';
+import { createOrRetrieveCustomer } from '@/utils/supabase-admin';
+import { getURL } from '@/utils/helpers';
+import { Database } from '@/types_db';
+
+export async function POST(req: Request) {
+  if (req.method === 'POST') {
+    // 1. Destructure the price and quantity from the POST body
+    const { price, quantity = 1, metadata = {} } = await req.json();
+
+    try {
+      // 2. Get the user from Supabase auth
+      const supabase = createRouteHandlerClient<Database>({
+        headers,
+        cookies
+      });
+      const {
+        data: { user }
+      } = await supabase.auth.getUser();
+
+      // 3. Retrieve or create the customer in Stripe
+      const customer = await createOrRetrieveCustomer({
+        uuid: user?.id || '',
+        email: user?.email || ''
+      });
+
+      // 4. Create a checkout session in Stripe
+      let session;
+      if (price.type === 'recurring') {
+        session = await stripe.checkout.sessions.create({
+          payment_method_types: ['card'],
+          billing_address_collection: 'required',
+          customer,
+          customer_update: {
+            address: 'auto'
+          },
+          line_items: [
+            {
+              price: price.id,
+              quantity
+            }
+          ],
+          mode: 'subscription',
+          allow_promotion_codes: true,
+          subscription_data: {
+            trial_from_plan: true,
+            metadata
+          },
+          success_url: `${getURL()}/account`,
+          cancel_url: `${getURL()}/`
+        });
+      } else if (price.type === 'one_time') {
+        session = await stripe.checkout.sessions.create({
+          payment_method_types: ['card'],
+          billing_address_collection: 'required',
+          customer,
+          customer_update: {
+            address: 'auto'
+          },
+          line_items: [
+            {
+              price: price.id,
+              quantity
+            }
+          ],
+          mode: 'payment',
+          allow_promotion_codes: true,
+          success_url: `${getURL()}/account`,
+          cancel_url: `${getURL()}/`
+        });
+      }
+
+      if (session) {
+        return new Response(JSON.stringify({ sessionId: session.id }), {
+          status: 200
+        });
+      } else {
+        return new Response(
+          JSON.stringify({
+            error: { statusCode: 500, message: 'Session is not defined' }
+          }),
+          { status: 500 }
+        );
+      }
+    } catch (err: any) {
+      console.log(err);
+      return new Response(JSON.stringify(err), { status: 500 });
+    }
+  } else {
+    return new Response('Method Not Allowed', {
+      headers: { Allow: 'POST' },
+      status: 405
+    });
+  }
+}

pages/api/create-portal-link.ts app/api/create-portal-link/route.ts

@@ -1,14 +1,17 @@
-import { NextApiHandler } from 'next';
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs';
-
+import { cookies, headers } from 'next/headers';
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
 import { stripe } from '@/utils/stripe';
 import { createOrRetrieveCustomer } from '@/utils/supabase-admin';
 import { getURL } from '@/utils/helpers';
+import { Database } from '@/types_db';
 
-const CreatePortalLink: NextApiHandler = async (req, res) => {
+export async function POST(req: Request) {
   if (req.method === 'POST') {
     try {
-      const supabase = createServerSupabaseClient({ req, res });
+      const supabase = createRouteHandlerClient<Database>({
+        headers,
+        cookies
+      });
       const {
         data: { user }
       } = await supabase.auth.getUser();
@@ -24,18 +27,22 @@ const CreatePortalLink: NextApiHandler = async (req, res) => {
         customer,
         return_url: `${getURL()}/account`
       });
-
-      return res.status(200).json({ url });
+      return new Response(JSON.stringify({ url }), {
+        status: 200
+      });
     } catch (err: any) {
       console.log(err);
-      res
-        .status(500)
-        .json({ error: { statusCode: 500, message: err.message } });
+      return new Response(
+        JSON.stringify({ error: { statusCode: 500, message: err.message } }),
+        {
+          status: 500
+        }
+      );
     }
   } else {
-    res.setHeader('Allow', 'POST');
-    res.status(405).end('Method Not Allowed');
+    return new Response('Method Not Allowed', {
+      headers: { Allow: 'POST' },
+      status: 405
+    });
   }
-};
-
-export default CreatePortalLink;
+}