Update billing schema and enhance configuration display

Updated the billing schema to include a more descriptive line item and an optional tiers element. Also, billing configuration was refactored and displayed more prominently in the UI. The plan feature listing now utilizes checkmarks to denote each feature and the product details are more clearly displayed.

packages/billing/gateway/src/components/line-item-details.tsx

@@ -1,3 +1,4 @@
+import { Plus, PlusCircle } from 'lucide-react';
 import { z } from 'zod';
 
 import { LineItemSchema } from '@kit/billing';
@@ -5,6 +6,9 @@ import { formatCurrency } from '@kit/shared/utils';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+const className =
+  'flex text-secondary-foreground items-center justify-between text-sm';
+
 export function LineItemDetails(
   props: React.PropsWithChildren<{
     lineItems: z.infer<typeof LineItemSchema>[];
@@ -12,22 +16,42 @@ export function LineItemDetails(
     selectedInterval?: string | undefined;
   }>,
 ) {
-  const className =
-    'flex items-center justify-between text-sm border-b border-dashed pb-2 last:border-transparent';
-
   return (
-    <div className={'flex flex-col space-y-2'}>
+    <div className={'flex flex-col space-y-1 px-1'}>
       {props.lineItems.map((item) => {
+        // If the item has a description, we render it as a simple text
+        // and pass the item as values to the translation so we can use
+        // the item properties in the translation.
+        if (item.description) {
+          return (
+            <div key={item.id} className={className}>
+              <span className={'flex items-center space-x-1.5'}>
+                <Plus className={'w-4'} />
+
+                <Trans
+                  i18nKey={item.description}
+                  values={item}
+                  defaults={item.description}
+                />
+              </span>
+            </div>
+          );
+        }
+
         switch (item.type) {
           case 'base':
             return (
               <div key={item.id} className={className}>
-                <span className={'flex space-x-2'}>
-                  <span>
-                    <Trans i18nKey={'billing:basePlan'} />
+                <span className={'flex items-center space-x-1'}>
+                  <span className={'flex items-center space-x-1.5'}>
+                    <PlusCircle className={'w-4'} />
+
+                    <span>
+                      <Trans i18nKey={'billing:basePlan'} />
+                    </span>
                   </span>
 
-                  <span>/</span>
+                  <span>-</span>
 
                   <span>
                     <If
@@ -50,8 +74,12 @@ export function LineItemDetails(
           case 'per-seat':
             return (
               <div key={item.id} className={className}>
-                <span>
-                  <Trans i18nKey={'billing:perTeamMember'} />
+                <span className={'flex items-center space-x-1.5'}>
+                  <PlusCircle className={'w-4'} />
+
+                  <span>
+                    <Trans i18nKey={'billing:perTeamMember'} />
+                  </span>
                 </span>
 
                 <span className={'font-semibold'}>
@@ -63,14 +91,18 @@ export function LineItemDetails(
           case 'metered':
             return (
               <div key={item.id} className={className}>
-                <span className={'flex items-center space-x-2'}>
-                  <span>
-                    <Trans
-                      i18nKey={'billing:perUnit'}
-                      values={{
-                        unit: item.unit,
-                      }}
-                    />
+                <span className={'flex items-center space-x-1'}>
+                  <span className={'flex items-center space-x-1.5'}>
+                    <PlusCircle className={'w-4'} />
+
+                    <span>
+                      <Trans
+                        i18nKey={'billing:perUnit'}
+                        values={{
+                          unit: item.unit,
+                        }}
+                      />
+                    </span>
                   </span>
 
                   {item.included ? (