From 0a28e22eb103feb03157580bb3326750e5a02bf7 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 22 Apr 2024 00:50:08 +0800
Subject: [PATCH] Add support for viewing lifetime orders

The commit introduces the ability to view lifetime orders on the billing page. It has updated the logic in both account and user billing pages to accommodate this change. Now, instead of only dealing with subscriptions, the pages can also cater to lifetime orders.
---
 .../(dashboard)/home/(user)/billing/page.tsx  | 16 +++++------
 .../home/[account]/billing/page.tsx           | 28 ++++++++++++-------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
index afc898b82..0b1dccf75 100644
--- a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
@@ -60,24 +60,24 @@ async function PersonalAccountBillingPage() {
           </If>
 
           <If condition={data}>
-            {(subscription) => (
+            {(data) => (
               <div
                 className={'mx-auto flex w-full max-w-2xl flex-col space-y-6'}
               >
-                <If condition={data}>
+                {'active' in data ? (
                   <CurrentSubscriptionCard
-                    subscription={data.}
+                    subscription={data}
                     config={billingConfig}
                   />
-                </If>
-
-                <If condition={!data}>
-                  <PersonalAccountCheckoutForm customerId={customerId} />
-
+                ) : (
                   <CurrentLifetimeOrderCard
                     order={data}
                     config={billingConfig}
                   />
+                )}
+
+                <If condition={!data}>
+                  <PersonalAccountCheckoutForm customerId={customerId} />
                 </If>
 
                 <If condition={customerId}>
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 8969359dd..0a0da8f16 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -2,6 +2,7 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
 import {
   BillingPortalCard,
+  CurrentLifetimeOrderCard,
   CurrentSubscriptionCard,
 } from '@kit/billing-gateway/components';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -39,8 +40,7 @@ async function TeamAccountBillingPage({ params }: Params) {
   const workspace = await loadTeamWorkspace(params.account);
   const accountId = workspace.account.id;
 
-  const [subscription, customerId] =
-    await loadTeamAccountBillingPage(accountId);
+  const [data, customerId] = await loadTeamAccountBillingPage(accountId);
 
   const canManageBilling =
     workspace.account.permissions.includes('billing.manage');
@@ -81,23 +81,31 @@ async function TeamAccountBillingPage({ params }: Params) {
       <PageBody>
         <div
           className={cn(`flex w-full flex-col space-y-6`, {
-            'mx-auto max-w-2xl ': subscription,
+            'mx-auto max-w-2xl': data,
           })}
         >
           <If
-            condition={subscription}
+            condition={data}
             fallback={
               <div>
                 <Checkout />
               </div>
             }
           >
-            {(subscription) => (
-              <CurrentSubscriptionCard
-                subscription={subscription}
-                config={billingConfig}
-              />
-            )}
+            {(data) => {
+              if ('active' in data) {
+                return (
+                  <CurrentSubscriptionCard
+                    subscription={data}
+                    config={billingConfig}
+                  />
+                );
+              }
+
+              return (
+                <CurrentLifetimeOrderCard order={data} config={billingConfig} />
+              );
+            }}
           </If>
 
           <BillingPortal />