Update authentication methods and UI components, remove redundant file

This commit accomplishes a few modifications including the elimination of `use-toast.tsx` due to redundancy. The authentication methods in `personal-accounts-server-actions.ts` were refactored to improve service integration and data handling. Additionally, UI components were updated for better readability and clarity. Cascading deletion was enabled in the `schema.sql` file for 'invited_by' reference.

packages/billing-gateway/package.json

@@ -14,20 +14,28 @@
     "./components": "./src/components/index.ts"
   },
   "peerDependencies": {
-    "zod": "^3.22.4",
-    "@kit/ui": "0.1.0",
-    "@kit/stripe": "0.1.0",
     "@kit/billing": "0.1.0",
-    "@kit/supabase": "^0.1.0",
     "@kit/shared": "^0.1.0",
-    "lucide-react": "^0.361.0",
-    "@supabase/supabase-js": "^2.39.8"
+    "@kit/stripe": "0.1.0",
+    "@kit/supabase": "^0.1.0",
+    "@kit/ui": "0.1.0",
+    "@supabase/supabase-js": "^2.39.8",
+    "lucide-react": "^0.363.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@kit/prettier-config": "0.1.0",
+    "@kit/billing": "*",
     "@kit/eslint-config": "0.2.0",
+    "@kit/prettier-config": "0.1.0",
+    "@kit/shared": "*",
+    "@kit/stripe": "*",
+    "@kit/supabase": "*",
     "@kit/tailwind-config": "0.1.0",
-    "@kit/tsconfig": "0.1.0"
+    "@kit/tsconfig": "0.1.0",
+    "@kit/ui": "*",
+    "@supabase/supabase-js": "^2.39.8",
+    "lucide-react": "^0.363.0",
+    "zod": "^3.22.4"
   },
   "eslintConfig": {
     "root": true,

packages/billing-gateway/src/components/embedded-checkout.tsx

@@ -5,29 +5,17 @@ import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
 type BillingProvider = Database['public']['Enums']['billing_provider'];
 
-const Fallback = (
-  <LoadingOverlay fullPage={false}>Loading Checkout...</LoadingOverlay>
-);
+const Fallback = <LoadingOverlay fullPage={false} />;
 
 export function EmbeddedCheckout(
   props: React.PropsWithChildren<{
     checkoutToken: string;
     provider: BillingProvider;
-    onClose?: () => void;
-  }>,
-) {
-  return <LazyCheckout {...props} />;
-}
-
-function LazyCheckout(
-  props: React.PropsWithChildren<{
-    checkoutToken: string;
-    provider: BillingProvider;
-    onClose?: () => void;
+    onClose: () => void;
   }>,
 ) {
   const CheckoutComponent = useMemo(
-    () => memo(loadCheckoutComponent(props.provider)),
+    () => loadCheckoutComponent(props.provider),
     [props.provider],
   );
 
@@ -65,28 +53,37 @@ function loadCheckoutComponent(provider: BillingProvider) {
 }
 
 function buildLazyComponent<
-  Cmp extends React.ComponentType<
-    React.PropsWithChildren<{
-      onClose?: (() => unknown) | undefined;
-      checkoutToken: string;
-    }>
-  >,
+  Component extends React.ComponentType<{
+    onClose: (() => unknown) | undefined;
+    checkoutToken: string;
+  }>,
 >(
   load: () => Promise<{
-    default: Cmp;
+    default: Component;
   }>,
   fallback = Fallback,
 ) {
-  let LoadedComponent: ReturnType<typeof lazy> | null = null;
+  let LoadedComponent: ReturnType<typeof lazy<Component>> | null = null;
 
-  const LazyComponent = forwardRef(function LazyDynamicComponent(props, ref) {
+  const LazyComponent = forwardRef<
+    React.ElementRef<'div'>,
+    {
+      onClose: (() => unknown) | undefined;
+      checkoutToken: string;
+    }
+  >(function LazyDynamicComponent(props, ref) {
     if (!LoadedComponent) {
       LoadedComponent = lazy(load);
     }
 
     return (
       <Suspense fallback={fallback}>
-        <LoadedComponent {...props} ref={ref} />
+        {/* @ts-ignore */}
+        <LoadedComponent
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+          ref={ref}
+        />
       </Suspense>
     );
   });