Update labels and refine hooks for teams and billing modules

This commit modifies several language labels and refines hooks related to 'teams' and 'billing' modules for better clarity and consistency. It also includes the deletion of unused locale files and package dependencies transfered to 'peerDependencies'. Lastly, it introduces minor enhancements in server command, error logging functionality, and scripts to interact with Stripe.

packages/billing-gateway/src/components/billing-portal-card.tsx

@@ -10,22 +10,27 @@ import {
   CardHeader,
   CardTitle,
 } from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
 
 export function BillingPortalCard() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Manage your Billing Details</CardTitle>
+        <CardTitle>
+          <Trans i18nKey="billing:billingPortalCardTitle" />
+        </CardTitle>
 
         <CardDescription>
-          You can change your plan or cancel your subscription at any time.
+          <Trans i18nKey="billing:billingPortalCardDescription" />
         </CardDescription>
       </CardHeader>
 
       <CardContent className={'space-y-2'}>
         <div>
           <Button>
-            <span>Visit the billing portal</span>
+            <span>
+              <Trans i18nKey="billing:billingPortalCardButton" />
+            </span>
 
             <ArrowUpRight className={'h-4'} />
           </Button>

packages/billing-gateway/src/components/billing-session-status.tsx

@@ -64,7 +64,7 @@ function SuccessSessionStatus({
 
         <Heading level={3}>
           <span className={'mr-4 font-semibold'}>
-            <Trans i18nKey={'subscription:checkoutSuccessTitle'} />
+            <Trans i18nKey={'billing:checkoutSuccessTitle'} />
           </span>
           🎉
         </Heading>
@@ -74,7 +74,7 @@ function SuccessSessionStatus({
         >
           <p>
             <Trans
-              i18nKey={'subscription:checkoutSuccessDescription'}
+              i18nKey={'billing:checkoutSuccessDescription'}
               values={{ customerEmail }}
             />
           </p>
@@ -84,7 +84,7 @@ function SuccessSessionStatus({
           <Link href={redirectPath}>
             <span className={'flex items-center space-x-2.5'}>
               <span>
-                <Trans i18nKey={'subscription:checkoutSuccessBackButton'} />
+                <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
               </span>
 
               <ChevronRight className={'h-4'} />

packages/billing-gateway/src/components/current-plan-alert.tsx

@@ -1,5 +1,6 @@
 import { Database } from '@kit/supabase/database';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Trans } from '@kit/ui/trans';
 
 export function CurrentPlanAlert(
   props: React.PropsWithoutRef<{
@@ -7,57 +8,47 @@ export function CurrentPlanAlert(
   }>,
 ) {
   let variant: 'success' | 'warning' | 'destructive';
-  let text: string;
-  let title: string;
+  const prefix = 'billing:status';
+
+  const text = `${prefix}.${props.status}.description`;
+  const title = `${prefix}.${props.status}.heading`;
 
   switch (props.status) {
     case 'active':
       variant = 'success';
-      title = 'Active';
-      text = 'Your subscription is active';
       break;
     case 'trialing':
       variant = 'success';
-      title = 'Trial';
-      text = 'You are currently on a trial';
       break;
     case 'past_due':
       variant = 'destructive';
-      title = 'Past Due';
-      text = 'Your subscription payment is past due';
       break;
     case 'canceled':
       variant = 'destructive';
-      title = 'Canceled';
-      text = 'You have canceled your subscription';
       break;
     case 'unpaid':
       variant = 'destructive';
-      title = 'Unpaid';
-      text = 'Your subscription payment is unpaid';
       break;
     case 'incomplete':
       variant = 'warning';
-      title = 'Incomplete';
-      text = 'We are processing your subscription payment';
       break;
     case 'incomplete_expired':
       variant = 'destructive';
-      title = 'Incomplete Expired';
-      text = 'Your subscription payment has expired';
       break;
     case 'paused':
       variant = 'warning';
-      title = 'Paused';
-      text = 'Your subscription is paused';
       break;
   }
 
   return (
     <Alert variant={variant}>
-      <AlertTitle>{title}</AlertTitle>
+      <AlertTitle>
+        <Trans i18nKey={title} />
+      </AlertTitle>
 
-      <AlertDescription>{text}</AlertDescription>
+      <AlertDescription>
+        <Trans i18nKey={text} />
+      </AlertDescription>
     </Alert>
   );
 }

packages/billing-gateway/src/components/current-plan-badge.tsx

@@ -1,5 +1,6 @@
 import { Database } from '@kit/supabase/database';
 import { Badge } from '@kit/ui/badge';
+import { Trans } from '@kit/ui/trans';
 
 export function CurrentPlanBadge(
   props: React.PropsWithoutRef<{
@@ -7,42 +8,38 @@ export function CurrentPlanBadge(
   }>,
 ) {
   let variant: 'success' | 'warning' | 'destructive';
-  let text: string;
+  const text = `billing:status.${props.status}.badge`;
 
   switch (props.status) {
     case 'active':
       variant = 'success';
-      text = 'Active';
       break;
     case 'trialing':
       variant = 'success';
-      text = 'Trialing';
       break;
     case 'past_due':
       variant = 'destructive';
-      text = 'Past due';
       break;
     case 'canceled':
       variant = 'destructive';
-      text = 'Canceled';
       break;
     case 'unpaid':
       variant = 'destructive';
-      text = 'Unpaid';
       break;
     case 'incomplete':
       variant = 'warning';
-      text = 'Incomplete';
       break;
     case 'incomplete_expired':
       variant = 'destructive';
-      text = 'Incomplete expired';
       break;
     case 'paused':
       variant = 'warning';
-      text = 'Paused';
       break;
   }
 
-  return <Badge variant={variant}>{text}</Badge>;
+  return (
+    <Badge variant={variant}>
+      <Trans i18nKey={text} />
+    </Badge>
+  );
 }

packages/billing-gateway/src/components/current-plan-card.tsx

@@ -38,10 +38,12 @@ export function CurrentPlanCard({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Your Plan</CardTitle>
+        <CardTitle>
+          <Trans i18nKey="billing:planCardTitle" />
+        </CardTitle>
 
         <CardDescription>
-          You can change your plan or cancel your subscription at any time.
+          <Trans i18nKey="billing:planCardDescription" />
         </CardDescription>
       </CardHeader>
 
@@ -53,13 +55,20 @@ export function CurrentPlanCard({
                 's-6 fill-green-500 text-white dark:fill-white dark:text-black'
               }
             />
+
             <span>{product.name}</span>
             <CurrentPlanBadge status={subscription.status} />
           </div>
 
           <div className={'text-muted-foreground'}>
-            Renews every {subscription.interval} at{' '}
-            <span>{product.currency}</span> <span>{plan.price}</span>
+            <Trans
+              i18nKey="billing:planRenewal"
+              values={{
+                interval: subscription.interval,
+                currency: product.currency,
+                price: plan.price,
+              }}
+            />
           </div>
         </div>
 
@@ -70,12 +79,16 @@ export function CurrentPlanCard({
         <div>
           <Accordion type="single" collapsible>
             <AccordionItem value="features">
-              <AccordionTrigger>Plan details</AccordionTrigger>
+              <AccordionTrigger>
+                <Trans i18nKey="billing:planDetails" />
+              </AccordionTrigger>
 
               <AccordionContent className="space-y-2.5">
                 <If condition={subscription.status === 'trialing'}>
                   <div className="flex flex-col">
-                    <span className="font-medium">Your trial ends on</span>
+                    <span className="font-medium">
+                      <Trans i18nKey="billing:trialEndsOn" />
+                    </span>
 
                     <div className={'text-muted-foreground'}>
                       <span>
@@ -118,12 +131,16 @@ export function CurrentPlanCard({
                 <div className="flex flex-col space-y-1">
                   <span className="font-medium">Features</span>
 
-                  <ul>
+                  <ul className={'flex flex-col space-y-0.5'}>
                     {product.features.map((item) => {
                       return (
-                        <li key={item} className="flex items-center space-x-0.5">
+                        <li
+                          key={item}
+                          className="flex items-center space-x-0.5"
+                        >
                           <CheckCircle2 className="h-4 text-green-500" />
-                          <span>
+
+                          <span className={'text-muted-foreground'}>
                             <Trans i18nKey={item} defaults={item} />
                           </span>
                         </li>

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

@@ -16,9 +16,7 @@ export function EmbeddedCheckout(
     onClose?: () => void;
   }>,
 ) {
-  return (
-    <LazyCheckout onClose={props.onClose} checkoutToken={props.checkoutToken} />
-  );
+  return <LazyCheckout {...props} />;
 }
 
 function LazyCheckout(