Adjusted Per seat billing and added example to the sample schema

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

@@ -20,10 +20,14 @@ export function EmbeddedCheckout(
   );
 
   return (
-    <CheckoutComponent
-      onClose={props.onClose}
-      checkoutToken={props.checkoutToken}
-    />
+    <>
+      <CheckoutComponent
+        onClose={props.onClose}
+        checkoutToken={props.checkoutToken}
+      />
+
+      <BlurryBackdrop />
+    </>
   );
 }
 
@@ -98,3 +102,14 @@ function buildLazyComponent<
 
   return memo(LazyComponent);
 }
+
+function BlurryBackdrop() {
+  return (
+    <div
+      className={
+        'bg-background/30 fixed left-0 top-0 w-full backdrop-blur-sm' +
+        ' !m-0 h-full'
+      }
+    />
+  );
+}

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

@@ -61,7 +61,7 @@ export function LineItemDetails(
         );
 
         const FlatFee = () => (
-          <div key={item.id} className={'flex flex-col'}>
+          <div className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
@@ -115,8 +115,8 @@ export function LineItemDetails(
         );
 
         const PerSeat = () => (
-          <div className={'flex flex-col'}>
-            <div key={item.id} className={className}>
+          <div key={index} className={'flex flex-col'}>
+            <div className={className}>
               <span className={'flex items-center space-x-1.5'}>
                 <PlusSquare className={'w-4'} />
 
@@ -141,7 +141,7 @@ export function LineItemDetails(
         );
 
         const Metered = () => (
-          <div key={item.id} className={'flex flex-col'}>
+          <div key={index} className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
@@ -179,13 +179,13 @@ export function LineItemDetails(
 
         switch (item.type) {
           case 'flat':
-            return <FlatFee />;
+            return <FlatFee key={item.id} />;
 
-          case 'per-seat':
-            return <PerSeat />;
+          case 'per_seat':
+            return <PerSeat key={item.id} />;
 
           case 'metered': {
-            return <Metered />;
+            return <Metered key={item.id} />;
           }
         }
       })}

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

@@ -232,7 +232,7 @@ function PricingItem(
                     `animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
                   )}
                 >
-                  <If condition={props.primaryLineItem.type === 'per-seat'}>
+                  <If condition={props.primaryLineItem.type === 'per_seat'}>
                     <Trans i18nKey={'billing:perTeamMember'} />
                   </If>
 

packages/billing/gateway/src/server/services/billing-event-handler/billing-event-handler.service.ts

@@ -60,7 +60,7 @@ export class BillingEventHandlerService {
 
         // Handle the subscription deleted event
         // here we delete the subscription from the database
-        logger.info(ctx, 'Processing subscription deleted event');
+        logger.info(ctx, 'Processing subscription deleted event...');
 
         const { error } = await client
           .from('subscriptions')

packages/billing/gateway/src/server/services/billing-gateway/billing-gateway.service.ts

@@ -127,16 +127,4 @@ export class BillingGatewayService {
 
     return strategy.updateSubscription(payload);
   }
-
-  /**
-   * Retrieves a plan by the specified plan ID.
-   * @param planId
-   */
-  async getPlanById(planId: string) {
-    const strategy = await BillingGatewayFactoryService.GetProviderStrategy(
-      this.provider,
-    );
-
-    return strategy.getPlanById(planId);
-  }
 }