Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

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

@@ -2,7 +2,10 @@
 
 import { useState, useTransition } from 'react';
 
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
 import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
   Card,
   CardContent,
@@ -10,6 +13,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@kit/ui/card';
+import { If } from '@kit/ui/if';
 
 import billingConfig from '~/config/billing.config';
 
@@ -17,7 +21,8 @@ import { createPersonalAccountCheckoutSession } from '../server-actions';
 
 export function PersonalAccountCheckoutForm() {
   const [pending, startTransition] = useTransition();
-  const [checkoutToken, setCheckoutToken] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const [checkoutToken, setCheckoutToken] = useState<string>();
 
   // If the checkout token is set, render the embedded checkout component
   if (checkoutToken) {
@@ -41,18 +46,26 @@ export function PersonalAccountCheckoutForm() {
           </CardDescription>
         </CardHeader>
 
-        <CardContent>
+        <CardContent className={'space-y-4'}>
+          <If condition={error}>
+            <ErrorAlert />
+          </If>
+
           <PlanPicker
             pending={pending}
             config={billingConfig}
             onSubmit={({ planId }) => {
               startTransition(async () => {
-                const { checkoutToken } =
-                  await createPersonalAccountCheckoutSession({
-                    planId,
-                  });
+                try {
+                  const { checkoutToken } =
+                    await createPersonalAccountCheckoutSession({
+                      planId,
+                    });
 
-                setCheckoutToken(checkoutToken);
+                  setCheckoutToken(checkoutToken);
+                } catch (e) {
+                  setError(true);
+                }
               });
             }}
           />
@@ -61,3 +74,17 @@ export function PersonalAccountCheckoutForm() {
     </div>
   );
 }
+
+function ErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <ExclamationTriangleIcon />
+
+      <AlertTitle>Sorry, we encountered an error.</AlertTitle>
+
+      <AlertDescription>
+        We couldn't process your request. Please try again.
+      </AlertDescription>
+    </Alert>
+  );
+}

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

@@ -1,10 +1,37 @@
+import { redirect } from 'next/navigation';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import {
+  BillingPortalCard,
+  CurrentPlanCard,
+} from '@kit/billing-gateway/components';
+import { Database } from '@kit/supabase/database';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
-import { PersonalAccountCheckoutForm } from '~/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form';
+import { createPersonalAccountBillingPortalSession } from '~/(dashboard)/home/(user)/billing/server-actions';
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-function PersonalAccountBillingPage() {
+import { loadUserWorkspace } from '../../_lib/load-user-workspace';
+import { PersonalAccountCheckoutForm } from './_components/personal-account-checkout-form';
+
+type Subscription = Database['public']['Tables']['subscriptions']['Row'];
+
+async function PersonalAccountBillingPage() {
+  const client = getSupabaseServerComponentClient();
+  const { session } = await loadUserWorkspace();
+
+  if (!session?.user) {
+    redirect(pathsConfig.auth.signIn);
+  }
+
+  const [subscription, customerId] = await loadData(client, session.user.id);
+
   return (
     <>
       <PageHeader
@@ -13,10 +40,48 @@ function PersonalAccountBillingPage() {
       />
 
       <PageBody>
-        <PersonalAccountCheckoutForm />
+        <div className={'mx-auto w-full max-w-2xl'}>
+          <div className={'flex flex-col space-y-8'}>
+            <If
+              condition={subscription}
+              fallback={<PersonalAccountCheckoutForm />}
+            >
+              {(subscription) => (
+                <CurrentPlanCard
+                  subscription={subscription}
+                  config={billingConfig}
+                />
+              )}
+            </If>
+
+            <If condition={customerId}>
+              <form action={createPersonalAccountBillingPortalSession}>
+                <BillingPortalCard />
+              </form>
+            </If>
+          </div>
+        </div>
       </PageBody>
     </>
   );
 }
 
 export default withI18n(PersonalAccountBillingPage);
+
+function loadData(client: SupabaseClient<Database>, userId: string) {
+  const subscription = client
+    .from('subscriptions')
+    .select<string, Subscription>('*')
+    .eq('account_id', userId)
+    .maybeSingle()
+    .then(({ data }) => data);
+
+  const customer = client
+    .from('billing_customers')
+    .select('customer_id')
+    .eq('account_id', userId)
+    .maybeSingle()
+    .then(({ data }) => data?.customer_id);
+
+  return Promise.all([subscription, customer]);
+}

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

@@ -1,3 +1,5 @@
 // We reuse the page from the billing module
 // as there is no need to create a new one.
-export * from '../return/page';
+import ReturnStripeSessionPage from '../../../[account]/billing/return/page';
+
+export default ReturnStripeSessionPage;

apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts

@@ -1,14 +1,16 @@
 'use server';
 
-import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 import { z } from 'zod';
 
 import { getProductPlanPairFromId } from '@kit/billing';
 import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { Logger } from '@kit/shared/logger';
+import { requireAuth } from '@kit/supabase/require-auth';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import appConfig from '~/config/app.config';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
 
@@ -22,13 +24,21 @@ export async function createPersonalAccountCheckoutSession(params: {
   planId: string;
 }) {
   const client = getSupabaseServerActionClient();
-  const { data, error } = await client.auth.getUser();
+  const { data, error } = await requireAuth(client);
 
   if (error ?? !data.user) {
     throw new Error('Authentication required');
   }
 
   const planId = z.string().min(1).parse(params.planId);
+
+  Logger.info(
+    {
+      planId,
+    },
+    `Creating checkout session for plan ID`,
+  );
+
   const service = await getBillingGatewayProvider(client);
   const productPlanPairFromId = getProductPlanPairFromId(billingConfig, planId);
 
@@ -61,6 +71,13 @@ export async function createPersonalAccountCheckoutSession(params: {
     customerId,
   });
 
+  Logger.info(
+    {
+      userId: data.user.id,
+    },
+    `Checkout session created. Returning checkout token to client...`,
+  );
+
   // return the checkout token to the client
   // so we can call the payment gateway to complete the checkout
   return {
@@ -68,7 +85,7 @@ export async function createPersonalAccountCheckoutSession(params: {
   };
 }
 
-export async function createBillingPortalSession() {
+export async function createPersonalAccountBillingPortalSession() {
   const client = getSupabaseServerActionClient();
   const { data, error } = await client.auth.getUser();
 
@@ -95,18 +112,17 @@ export async function createBillingPortalSession() {
 }
 
 function getCheckoutSessionReturnUrl() {
-  const origin = headers().get('origin')!;
-
   return new URL(
     pathsConfig.app.personalAccountBillingReturn,
-    origin,
+    appConfig.url,
   ).toString();
 }
 
 function getBillingPortalReturnUrl() {
-  const origin = headers().get('origin')!;
-
-  return new URL(pathsConfig.app.accountBilling, origin).toString();
+  return new URL(
+    pathsConfig.app.personalAccountBilling,
+    appConfig.url,
+  ).toString();
 }
 
 async function getCustomerIdFromAccountId(accountId: string) {