Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

packages/billing/stripe/eslint.config.mjs

@@ -1,3 +0,0 @@
-import eslintConfigBase from '@kit/eslint-config/base.js';
-
-export default eslintConfigBase;

packages/billing/stripe/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@kit/stripe",
-  "private": true,
   "version": "0.1.0",
-  "scripts": {
-    "clean": "git clean -xdf .turbo node_modules",
-    "format": "prettier --check \"**/*.{ts,tsx}\"",
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
-    "start": "docker run --rm -it --name=stripe -v ~/.config/stripe:/root/.config/stripe stripe/stripe-cli:latest listen --forward-to http://host.docker.internal:3000/api/billing/webhook"
+  "private": true,
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
   },
-  "prettier": "@kit/prettier-config",
   "exports": {
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts"
   },
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "typecheck": "tsc --noEmit",
+    "start": "docker run --rm -it --name=stripe -v ~/.config/stripe:/root/.config/stripe stripe/stripe-cli:latest listen --forward-to http://host.docker.internal:3000/api/billing/webhook"
+  },
   "dependencies": {
     "@stripe/react-stripe-js": "catalog:",
     "@stripe/stripe-js": "catalog:",
@@ -21,23 +25,14 @@
   },
   "devDependencies": {
     "@kit/billing": "workspace:*",
-    "@kit/eslint-config": "workspace:*",
-    "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@types/react": "catalog:",
-    "date-fns": "^4.1.0",
+    "date-fns": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
     "zod": "catalog:"
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "src/*"
-      ]
-    }
   }
 }

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

@@ -44,12 +44,13 @@ function EmbeddedCheckoutPopup({
   onClose?: () => void;
 }>) {
   const [open, setOpen] = useState(true);
-  const className = `bg-white p-4 overflow-y-auto shadow-transparent border`;
+  const className = `bg-white p-4 overflow-y-auto shadow-transparent border w-full min-w-md max-w-4xl`;
 
   return (
     <Dialog
       defaultOpen
       open={open}
+      disablePointerDismissal
       onOpenChange={(open) => {
         if (!open && onClose) {
           onClose();
@@ -63,9 +64,6 @@ function EmbeddedCheckoutPopup({
           maxHeight: '98vh',
         }}
         className={className}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
-        onEscapeKeyDown={(e) => e.preventDefault()}
       >
         <DialogTitle className={'hidden'}>Checkout</DialogTitle>
         <div>{children}</div>

packages/billing/stripe/src/schema/stripe-client-env.schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import * as z from 'zod';
 
 export const StripeClientEnvSchema = z
   .object({

packages/billing/stripe/src/schema/stripe-server-env.schema.ts

@@ -1,15 +1,15 @@
-import { z } from 'zod';
+import * as z from 'zod';
 
 export const StripeServerEnvSchema = z
   .object({
     secretKey: z
       .string({
-        required_error: `Please provide the variable STRIPE_SECRET_KEY`,
+        error: `Please provide the variable STRIPE_SECRET_KEY`,
       })
       .min(1),
     webhooksSecret: z
       .string({
-        required_error: `Please provide the variable STRIPE_WEBHOOK_SECRET`,
+        error: `Please provide the variable STRIPE_WEBHOOK_SECRET`,
       })
       .min(1),
   })

packages/billing/stripe/src/services/create-stripe-billing-portal-session.ts

@@ -1,5 +1,5 @@
 import type { Stripe } from 'stripe';
-import { z } from 'zod';
+import * as z from 'zod';
 
 import type { CreateBillingPortalSessionSchema } from '@kit/billing/schema';
 
@@ -9,7 +9,7 @@ import type { CreateBillingPortalSessionSchema } from '@kit/billing/schema';
  */
 export async function createStripeBillingPortalSession(
   stripe: Stripe,
-  params: z.infer<typeof CreateBillingPortalSessionSchema>,
+  params: z.output<typeof CreateBillingPortalSessionSchema>,
 ) {
   return stripe.billingPortal.sessions.create({
     customer: params.customerId,

packages/billing/stripe/src/services/create-stripe-checkout.ts

@@ -1,5 +1,5 @@
 import type { Stripe } from 'stripe';
-import { z } from 'zod';
+import * as z from 'zod';
 
 import type { CreateBillingCheckoutSchema } from '@kit/billing/schema';
 
@@ -17,7 +17,7 @@ const enableTrialWithoutCreditCard =
  */
 export async function createStripeCheckout(
   stripe: Stripe,
-  params: z.infer<typeof CreateBillingCheckoutSchema>,
+  params: z.output<typeof CreateBillingCheckoutSchema>,
 ) {
   // in MakerKit, a subscription belongs to an organization,
   // rather than to a user

packages/billing/stripe/src/services/stripe-billing-strategy.service.ts

@@ -1,7 +1,6 @@
 import 'server-only';
-
 import type { Stripe } from 'stripe';
-import { z } from 'zod';
+import * as z from 'zod';
 
 import { BillingStrategyProviderService } from '@kit/billing';
 import type {
@@ -35,7 +34,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @param params
    */
   async createCheckoutSession(
-    params: z.infer<typeof CreateBillingCheckoutSchema>,
+    params: z.output<typeof CreateBillingCheckoutSchema>,
   ) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
@@ -67,7 +66,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @param params
    */
   async createBillingPortalSession(
-    params: z.infer<typeof CreateBillingPortalSessionSchema>,
+    params: z.output<typeof CreateBillingPortalSessionSchema>,
   ) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
@@ -96,7 +95,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @param params
    */
   async cancelSubscription(
-    params: z.infer<typeof CancelSubscriptionParamsSchema>,
+    params: z.output<typeof CancelSubscriptionParamsSchema>,
   ) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
@@ -139,7 +138,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @param params
    */
   async retrieveCheckoutSession(
-    params: z.infer<typeof RetrieveCheckoutSessionSchema>,
+    params: z.output<typeof RetrieveCheckoutSessionSchema>,
   ) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
@@ -183,7 +182,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @description Reports usage for a subscription with the Metrics API
    * @param params
    */
-  async reportUsage(params: z.infer<typeof ReportBillingUsageSchema>) {
+  async reportUsage(params: z.output<typeof ReportBillingUsageSchema>) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
 
@@ -230,7 +229,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @name queryUsage
    * @description Reports the total usage for a subscription with the Metrics API
    */
-  async queryUsage(params: z.infer<typeof QueryBillingUsageSchema>) {
+  async queryUsage(params: z.output<typeof QueryBillingUsageSchema>) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();
 
@@ -287,7 +286,7 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
    * @param params
    */
   async updateSubscriptionItem(
-    params: z.infer<typeof UpdateSubscriptionParamsSchema>,
+    params: z.output<typeof UpdateSubscriptionParamsSchema>,
   ) {
     const stripe = await this.stripeProvider();
     const logger = await getLogger();

packages/billing/stripe/src/services/stripe-sdk.ts

@@ -1,5 +1,4 @@
 import 'server-only';
-
 import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';
 
 const STRIPE_API_VERSION = '2026-02-25.clover';