Update dependencies, add copy and adjust UI

This commit updates the version of Next.js along with a series of other dependencies outlined in the pnpm-lock.yaml file. The new copy "For each {{unit}}" has been added to the billing.json file and several adjustments have been made in the UI components. In particular, a separator has been added, animations have been set to re-run on re-render for certain elements, and the PricingTable component has been added.

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

@@ -12,16 +12,16 @@ 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 divide-y'}>
+    <div className={'flex flex-col space-y-2'}>
       {props.lineItems.map((item) => {
         switch (item.type) {
           case 'base':
             return (
-              <div
-                key={item.id}
-                className={'flex items-center justify-between py-1.5 text-sm'}
-              >
+              <div key={item.id} className={className}>
                 <span className={'flex space-x-2'}>
                   <span>
                     <Trans i18nKey={'billing:basePlan'} />
@@ -49,10 +49,7 @@ export function LineItemDetails(
 
           case 'per-seat':
             return (
-              <div
-                key={item.id}
-                className={'flex items-center justify-between py-1.5 text-sm'}
-              >
+              <div key={item.id} className={className}>
                 <span>
                   <Trans i18nKey={'billing:perTeamMember'} />
                 </span>
@@ -65,25 +62,26 @@ export function LineItemDetails(
 
           case 'metered':
             return (
-              <div
-                key={item.id}
-                className={'flex items-center justify-between py-1.5 text-sm'}
-              >
-                <span>
-                  <Trans
-                    i18nKey={'billing:perUnit'}
-                    values={{
-                      unit: item.unit,
-                    }}
-                  />
-
-                  {item.included ? (
+              <div key={item.id} className={className}>
+                <span className={'flex items-center space-x-2'}>
+                  <span>
                     <Trans
-                      i18nKey={'billing:perUnitIncluded'}
+                      i18nKey={'billing:perUnit'}
                       values={{
-                        included: item.included,
+                        unit: item.unit,
                       }}
                     />
+                  </span>
+
+                  {item.included ? (
+                    <span>
+                      <Trans
+                        i18nKey={'billing:perUnitIncluded'}
+                        values={{
+                          included: item.included,
+                        }}
+                      />
+                    </span>
                   ) : (
                     ''
                   )}

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

@@ -377,10 +377,14 @@ function PlanDetails({
 }) {
   const isRecurring = selectedPlan.paymentType === 'recurring';
 
+  // trick to force animation on re-render
+  const key = Math.random();
+
   return (
     <div
+      key={key}
       className={
-        'fade-in animate-in zoom-in-90 flex w-full flex-col space-y-4 rounded-lg border p-4'
+        'fade-in animate-in flex w-full flex-col space-y-4 rounded-lg border p-4 duration-500'
       }
     >
       <div className={'flex flex-col space-y-0.5'}>

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

@@ -212,13 +212,11 @@ function PricingItem(
           </If>
         </div>
 
-        <div
-          className={cn({
-            ['text-muted-foreground']: !highlighted,
-            ['text-primary-foreground']: highlighted,
-          })}
-        >
-          <FeaturesList features={props.product.features} />
+        <div>
+          <FeaturesList
+            highlighted={highlighted}
+            features={props.product.features}
+          />
         </div>
       </div>
 
@@ -245,13 +243,14 @@ function PricingItem(
 function FeaturesList(
   props: React.PropsWithChildren<{
     features: string[];
+    highlighted?: boolean;
   }>,
 ) {
   return (
     <ul className={'flex flex-col space-y-2'}>
       {props.features.map((feature) => {
         return (
-          <ListItem key={feature}>
+          <ListItem highlighted={props.highlighted} key={feature}>
             <Trans
               i18nKey={`common:plans.features.${feature}`}
               defaults={feature}
@@ -279,14 +278,31 @@ function Price({ children }: React.PropsWithChildren) {
   );
 }
 
-function ListItem({ children }: React.PropsWithChildren) {
+function ListItem({
+  children,
+  highlighted,
+}: React.PropsWithChildren<{
+  highlighted?: boolean;
+}>) {
   return (
     <li className={'flex items-center space-x-1.5'}>
       <div>
-        <CheckCircle className={'h-4 text-green-600'} />
+        <CheckCircle
+          className={cn('h-4', {
+            ['text-primary-foreground']: highlighted,
+            ['text-green-600']: !highlighted,
+          })}
+        />
       </div>
 
-      <span className={'text-sm'}>{children}</span>
+      <span
+        className={cn('text-sm', {
+          ['text-muted-foreground']: !highlighted,
+          ['text-primary-foreground']: highlighted,
+        })}
+      >
+        {children}
+      </span>
     </li>
   );
 }