Update billing system to support single and recurring payments

This update modifies the billing system to properly handle both single and recurring payment plans. Logic is introduced to determine whether the selected plan is recurring or a one-time payment and adjust the interface accordingly. The naming of some components and variables has been changed to more accurately reflect their purpose. Additionally, a

apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx

@@ -25,7 +25,10 @@ export function PersonalAccountCheckoutForm(props: {
 }) {
   const [pending, startTransition] = useTransition();
   const [error, setError] = useState(false);
-  const [checkoutToken, setCheckoutToken] = useState<string>();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
 
   // only allow trial if the user is not already a customer
   const canStartTrial = !props.customerId;
@@ -36,6 +39,7 @@ export function PersonalAccountCheckoutForm(props: {
       <EmbeddedCheckout
         checkoutToken={checkoutToken}
         provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
       />
     );
   }

apps/web/app/(dashboard)/home/(user)/billing/page.tsx

@@ -2,7 +2,7 @@ import { SupabaseClient } from '@supabase/supabase-js';
 
 import {
   BillingPortalCard,
-  CurrentPlanCard,
+  CurrentSubscriptionCard,
 } from '@kit/billing-gateway/components';
 import { Database } from '@kit/supabase/database';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
@@ -51,9 +51,9 @@ async function PersonalAccountBillingPage() {
           <If condition={subscription}>
             {(subscription) => (
               <div
-                className={'mx-auto flex w-full max-w-2xl flex-col space-y-4'}
+                className={'mx-auto flex w-full max-w-2xl flex-col space-y-6'}
               >
-                <CurrentPlanCard
+                <CurrentSubscriptionCard
                   subscription={subscription}
                   config={billingConfig}
                 />

apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -24,7 +24,10 @@ export function TeamAccountCheckoutForm(params: {
 }) {
   const routeParams = useParams();
   const [pending, startTransition] = useTransition();
-  const [checkoutToken, setCheckoutToken] = useState<string | null>(null);
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
 
   // If the checkout token is set, render the embedded checkout component
   if (checkoutToken) {
@@ -32,6 +35,7 @@ export function TeamAccountCheckoutForm(params: {
       <EmbeddedCheckout
         checkoutToken={checkoutToken}
         provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
       />
     );
   }

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -1,6 +1,6 @@
 import {
   BillingPortalCard,
-  CurrentPlanCard,
+  CurrentSubscriptionCard,
 } from '@kit/billing-gateway/components';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -53,7 +53,7 @@ async function TeamAccountBillingPage({ params }: Params) {
           </If>
 
           <div>
-            <div className={'flex flex-col space-y-2'}>
+            <div className={'flex flex-col space-y-6'}>
               <If
                 condition={subscription}
                 fallback={
@@ -66,7 +66,10 @@ async function TeamAccountBillingPage({ params }: Params) {
                 }
               >
                 {(data) => (
-                  <CurrentPlanCard subscription={data} config={billingConfig} />
+                  <CurrentSubscriptionCard
+                    subscription={data}
+                    config={billingConfig}
+                  />
                 )}
               </If>
 

apps/web/app/(dashboard)/home/[account]/members/page.tsx

@@ -114,7 +114,7 @@ async function TeamAccountMembersPage({ params }: Params) {
 
       <PageBody>
         <div
-          className={'mx-auto flex w-full max-w-3xl flex-col space-y-4 pb-32'}
+          className={'mx-auto flex w-full max-w-3xl flex-col space-y-6 pb-32'}
         >
           <Card>
             <CardHeader className={'flex flex-row justify-between'}>