Next.js 16, React 19.2, Identities page, Invitations identities step, PNPM Catalogs (#381)

* Upgraded to Next.js 16
* Refactored code to comply with React 19.2 ESLint rules
* Refactored some useEffect usages with the new useEffectEvent
* Added Identities page and added second step to set up an identity after accepting an invitation
* Updated all dependencies
* Introduced PNPM catalogs for some frequently updated dependencies
* Bugs fixing and improvements

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

@@ -1,11 +1,27 @@
-import { Suspense, forwardRef, lazy, memo, useMemo } from 'react';
+import { Suspense, lazy } from 'react';
 
 import { Enums } from '@kit/supabase/database';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
 type BillingProvider = Enums<'billing_provider'>;
 
-const Fallback = <LoadingOverlay fullPage={false} />;
+// Create lazy components at module level (not during render)
+const StripeCheckoutLazy = lazy(async () => {
+  const { StripeCheckout } = await import('@kit/stripe/components');
+  return { default: StripeCheckout };
+});
+
+const LemonSqueezyCheckoutLazy = lazy(async () => {
+  const { LemonSqueezyEmbeddedCheckout } = await import(
+    '@kit/lemon-squeezy/components'
+  );
+  return { default: LemonSqueezyEmbeddedCheckout };
+});
+
+type CheckoutProps = {
+  onClose: (() => unknown) | undefined;
+  checkoutToken: string;
+};
 
 export function EmbeddedCheckout(
   props: React.PropsWithChildren<{
@@ -14,100 +30,54 @@ export function EmbeddedCheckout(
     onClose?: () => void;
   }>,
 ) {
-  const CheckoutComponent = useMemo(
-    () => loadCheckoutComponent(props.provider),
-    [props.provider],
-  );
-
   return (
     <>
-      <CheckoutComponent
-        onClose={props.onClose}
-        checkoutToken={props.checkoutToken}
-      />
+      <Suspense fallback={<LoadingOverlay fullPage={false} />}>
+        <CheckoutSelector
+          provider={props.provider}
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+        />
+      </Suspense>
 
       <BlurryBackdrop />
     </>
   );
 }
 
-function loadCheckoutComponent(provider: BillingProvider) {
-  switch (provider) {
-    case 'stripe': {
-      return buildLazyComponent(() => {
-        return import('@kit/stripe/components').then(({ StripeCheckout }) => {
-          return {
-            default: StripeCheckout,
-          };
-        });
-      });
-    }
-
-    case 'lemon-squeezy': {
-      return buildLazyComponent(() => {
-        return import('@kit/lemon-squeezy/components').then(
-          ({ LemonSqueezyEmbeddedCheckout }) => {
-            return {
-              default: LemonSqueezyEmbeddedCheckout,
-            };
-          },
-        );
-      });
-    }
-
-    case 'paddle': {
-      throw new Error('Paddle is not yet supported');
-    }
-
-    default:
-      throw new Error(`Unsupported provider: ${provider as string}`);
-  }
-}
-
-function buildLazyComponent<
-  Component extends React.ComponentType<{
-    onClose: (() => unknown) | undefined;
-    checkoutToken: string;
-  }>,
->(
-  load: () => Promise<{
-    default: Component;
-  }>,
-  fallback = Fallback,
+function CheckoutSelector(
+  props: CheckoutProps & { provider: BillingProvider },
 ) {
-  let LoadedComponent: ReturnType<typeof lazy<Component>> | null = null;
-
-  const LazyComponent = forwardRef<
-    React.ElementRef<'div'>,
-    {
-      onClose: (() => unknown) | undefined;
-      checkoutToken: string;
-    }
-  >(function LazyDynamicComponent(props, ref) {
-    if (!LoadedComponent) {
-      LoadedComponent = lazy(load);
-    }
-
-    return (
-      <Suspense fallback={fallback}>
-        {/* @ts-expect-error: weird TS */}
-        <LoadedComponent
+  switch (props.provider) {
+    case 'stripe':
+      return (
+        <StripeCheckoutLazy
           onClose={props.onClose}
           checkoutToken={props.checkoutToken}
-          ref={ref}
         />
-      </Suspense>
-    );
-  });
+      );
 
-  return memo(LazyComponent);
+    case 'lemon-squeezy':
+      return (
+        <LemonSqueezyCheckoutLazy
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+        />
+      );
+
+    case 'paddle':
+      throw new Error('Paddle is not yet supported');
+
+    default:
+      throw new Error(`Unsupported provider: ${props.provider as string}`);
+  }
 }
 
 function BlurryBackdrop() {
   return (
     <div
       className={
-        'bg-background/30 fixed left-0 top-0 w-full backdrop-blur-sm' +
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
         ' !m-0 h-full'
       }
     />

packages/billing/gateway/src/components/plan-picker.tsx

@@ -316,7 +316,7 @@ export function PlanPicker(
 
                             <div
                               className={
-                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
+                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-4 lg:text-right'
                               }
                             >
                               <div>
@@ -415,6 +415,7 @@ function PlanDetails({
   const isRecurring = selectedPlan.paymentType === 'recurring';
 
   // trick to force animation on re-render
+  // eslint-disable-next-line react-hooks/purity
   const key = Math.random();
 
   return (

packages/billing/gateway/src/components/pricing-table.tsx

@@ -422,7 +422,7 @@ function PlanIntervalSwitcher(
         const selected = plan === props.interval;
 
         const className = cn(
-          'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
+          'animate-in fade-in rounded-full !outline-hidden transition-all focus:!ring-0',
           {
             'border-r-transparent': index === 0,
             ['hover:text-primary text-muted-foreground']: !selected,