Subscription Actions

"use server";
 
import { stripe } from "./config";
import { createSupabaseClient } from "@/utils/supabase/server";
import { createOrRetrieveCustomer } from "@/utils/supabase/admin";
 
function getURL(path: string = "") {
  let url =
    process.env.NEXT_PUBLIC_SITE_URL ??
    process.env.VERCEL_URL ??
    "http://localhost:3000";
 
  url = url.startsWith("http") ? url : `https://${url}`;
  url = url.endsWith("/") ? url.slice(0, -1) : url;
 
  return path ? `${url}${path}` : url;
}
 
// ... checkoutWithStripe from lesson 2.3 ...
 
export async function createStripePortal(
  currentPath: string = "/protected/subscription"
): Promise<string> {
  try {
    const supabase = await createSupabaseClient();
    const {
      data: { user },
    } = await supabase.auth.getUser();
 
    if (!user) {
      throw new Error("Could not get user session.");
    }
 
    const customer = await createOrRetrieveCustomer({
      uuid: user.id,
      email: user.email || "",
    });
 
    const { url } = await stripe.billingPortal.sessions.create({
      customer,
      return_url: getURL(currentPath),
    });
 
    if (!url) {
      throw new Error("Could not create billing portal");
    }
 
    return url;
  } catch (error) {
    console.error("Error creating portal:", error);
    throw error;
  }
}

"use client";
 
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { createStripePortal } from "@/utils/stripe/server";
import { SubscriptionWithPrice } from "@/utils/supabase/queries";
import { useState } from "react";
import { useRouter } from "next/navigation";
 
export default function SubscriptionActions({
  subscription,
}: {
  subscription: SubscriptionWithPrice;
}) {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
 
  async function handleManageSubscription() {
    setIsLoading(true);
    try {
      const portalUrl = await createStripePortal();
      router.push(portalUrl);
    } catch (error) {
      console.error("Error opening portal:", error);
      setIsLoading(false);
    }
  }
 
  return (
    <div className="flex gap-2">
      <Button
        onClick={handleManageSubscription}
        disabled={isLoading}
        variant="outline"
        className="flex-1"
      >
        <Spinner variant="primary" isLoading={isLoading} />
        {isLoading ? "Loading..." : "Manage Subscription"}
      </Button>
    </div>
  );
}

import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { createSupabaseClient } from "@/utils/supabase/server";
import { getSubscription } from "@/utils/supabase/queries";
import SubscriptionActions from "@/components/subscription-actions";
 
export default async function Page() {
  const supabase = await createSupabaseClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();
 
  const subscription = await getSubscription(supabase);
 
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };
 
  const formatPrice = (amount: number | null, currency: string) => {
    if (!amount) return "N/A";
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency || "usd",
      minimumFractionDigits: 0,
    }).format(amount / 100);
  };
 
  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex flex-col">
          <h1 className="text-2xl font-medium">My Membership</h1>
          <p className="text-muted-foreground mt-2">
            Manage your guild membership
          </p>
        </div>
      </div>
 
      <div className="space-y-6">
        {!subscription ? (
          <Card className="p-6">
            <h2 className="font-medium">No Active Membership</h2>
            <p className="text-muted-foreground mt-2">
              You haven't joined a membership tier yet. Visit the Membership
              page to choose a tier and unlock guild benefits.
            </p>
            <Button className="mt-4" asChild>
              <Link href="/protected/pricing">View Membership Tiers</Link>
            </Button>
          </Card>
        ) : (
          <Card className="p-6 space-y-4">
            {/* ... existing subscription details ... */}
 
            <SubscriptionActions subscription={subscription} />
          </Card>
        )}
      </div>
 
      <p className="text-sm text-muted-foreground">
        Signed in as: {user?.email}
      </p>
    </div>
  );
}