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>
+  );
+}