Fix subscription button text for different billing intervals

app/account/page.tsx

@@ -6,15 +6,17 @@ import { createClient } from '@/utils/supabase/server';
 import {
   getUserDetails,
   getSubscription,
-  getUser
+  getUser,
+  getUserSubscriptions
 } from '@/utils/supabase/queries';
 
 export default async function Account() {
   const supabase = createClient();
-  const [user, userDetails, subscription] = await Promise.all([
-    getUser(supabase),
+  const user = await getUser(supabase);
+  const [userDetails, subscriptions] = await Promise.all([
+    // getUser(supabase),
     getUserDetails(supabase),
-    getSubscription(supabase)
+    getUserSubscriptions(supabase, user)
   ]);
 
   if (!user) {
@@ -34,7 +36,7 @@ export default async function Account() {
         </div>
       </div>
       <div className="p-4">
-        <CustomerPortalForm subscription={subscription} />
+        <CustomerPortalForm subscription={subscriptions[0]} />
         <NameForm userName={userDetails?.full_name ?? ''} />
         <EmailForm userEmail={user.email} />
       </div>

app/page.tsx

@@ -2,23 +2,27 @@ import Pricing from '@/components/ui/Pricing/Pricing';
 import { createClient } from '@/utils/supabase/server';
 import {
   getProducts,
-  getSubscription,
-  getUser
+  getUser,
+  getUserSubscriptions
 } from '@/utils/supabase/queries';
 
 export default async function PricingPage() {
   const supabase = createClient();
-  const [user, products, subscription] = await Promise.all([
-    getUser(supabase),
+  const user = await getUser(supabase);
+
+  const [products, subscriptions] = await Promise.all([
+    // getUser(supabase),
     getProducts(supabase),
-    getSubscription(supabase)
+    getUserSubscriptions(supabase, user),
   ]);
 
+
+console.log(subscriptions);
+
   return (
     <Pricing
       user={user}
       products={products ?? []}
-      subscription={subscription}
-    />
+      subscriptions={subscriptions}  />
   );
 }

components/ui/Pricing/Pricing.tsx

@@ -27,12 +27,12 @@ interface SubscriptionWithProduct extends Subscription {
 interface Props {
   user: User | null | undefined;
   products: ProductWithPrices[];
-  subscription: SubscriptionWithProduct | null;
+  subscriptions: SubscriptionWithProduct[];
 }
 
 type BillingInterval = 'lifetime' | 'year' | 'month';
 
-export default function Pricing({ user, products, subscription }: Props) {
+export default function Pricing({ user, products, subscriptions }: Props) {
   const intervals = Array.from(
     new Set(
       products.flatMap((product) =>
@@ -54,6 +54,11 @@ export default function Pricing({ user, products, subscription }: Props) {
       return router.push('/signin/signup');
     }
 
+    if (isSubscribedToPrice(price.id)) {
+      // Redirect to management page
+      return router.push('/account'); // 假设这是用户的订阅管理页面
+    }
+
     const { errorRedirect, sessionId } = await checkoutWithStripe(
       price,
       currentPath
@@ -81,6 +86,15 @@ export default function Pricing({ user, products, subscription }: Props) {
     setPriceIdLoading(undefined);
   };
 
+  const isSubscribedToPrice = (priceId: string) =>
+    subscriptions.some(sub => sub.price_id === priceId);
+
+  const isSubscribedToCurrentInterval = (product: ProductWithPrices) =>
+    subscriptions.some(sub => 
+      sub.prices?.interval === billingInterval && 
+      sub.prices.products?.id === product.id
+    );
+
   if (!products.length) {
     return (
       <section className="bg-black">
@@ -154,15 +168,16 @@ export default function Pricing({ user, products, subscription }: Props) {
                 currency: price.currency!,
                 minimumFractionDigits: 0
               }).format((price?.unit_amount || 0) / 100);
+
+              const isSubscribed = isSubscribedToCurrentInterval(product);
+
               return (
                 <div
                   key={product.id}
                   className={cn(
                     'flex flex-col rounded-lg shadow-sm divide-y divide-zinc-600 bg-zinc-900',
                     {
-                      'border border-pink-500': subscription
-                        ? product.name === subscription?.prices?.products?.name
-                        : product.name === 'Freelancer'
+                      'border border-pink-500': isSubscribed
                     },
                     'flex-1', // This makes the flex item grow to fill the space
                     'basis-1/3', // Assuming you want each card to take up roughly a third of the container's width
@@ -189,7 +204,7 @@ export default function Pricing({ user, products, subscription }: Props) {
                       onClick={() => handleStripeCheckout(price)}
                       className="block w-full py-2 mt-8 text-sm font-semibold text-center text-white rounded-md hover:bg-zinc-900"
                     >
-                      {subscription ? 'Manage' : 'Subscribe'}
+                      {isSubscribed ? 'Manage' : 'Subscribe'}
                     </Button>
                   </div>
                 </div>