Improve tree shaking and dynamic loading, fix translations in production build. Moved i18n settings to the application's side.

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

@@ -2,9 +2,11 @@
 
 import { useState, useTransition } from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
-import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
+import { PlanPicker } from '@kit/billing-gateway/components';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
   Card,
@@ -20,6 +22,19 @@ import billingConfig from '~/config/billing.config';
 
 import { createPersonalAccountCheckoutSession } from '../server-actions';
 
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
 export function PersonalAccountCheckoutForm(props: {
   customerId: string | null | undefined;
 }) {

apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -2,9 +2,10 @@
 
 import { useState, useTransition } from 'react';
 
+import dynamic from 'next/dynamic';
 import { useParams } from 'next/navigation';
 
-import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
+import { PlanPicker } from '@kit/billing-gateway/components';
 import {
   Card,
   CardContent,
@@ -18,6 +19,19 @@ import billingConfig from '~/config/billing.config';
 
 import { createTeamAccountCheckoutSession } from '../server-actions';
 
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
 export function TeamAccountCheckoutForm(params: {
   accountId: string;
   customerId: string | null | undefined;