Update UI style and enhance billing services

Several changes have been made in this commit. Firstly, updates have been made to the site-header-account-section and the pricing-table components to enhance UI aesthetics. Secondly, billing services have been significantly improved. A new method for retrieving plan information by an ID has been introduced. This method is available for all strategy services, including Stripe and Lemon-Squeezy. Furthermore, the way context and logging are handled during the billing process has been streamlined for better readability and efficiency.

packages/billing/stripe/src/services/stripe-billing-strategy.service.ts

@@ -218,6 +218,36 @@ export class StripeBillingStrategyService
     }
   }
 
+  async getPlanById(planId: string) {
+    const logger = await getLogger();
+
+    const ctx = {
+      name: this.namespace,
+      planId,
+    };
+
+    logger.info(ctx, 'Retrieving plan by id...');
+
+    const stripe = await this.stripeProvider();
+
+    try {
+      const plan = await stripe.plans.retrieve(planId);
+
+      logger.info(ctx, 'Plan retrieved successfully');
+
+      return {
+        id: plan.id,
+        name: plan.nickname ?? '',
+        amount: plan.amount ?? 0,
+        interval: plan.interval,
+      };
+    } catch (error) {
+      logger.error({ ...ctx, error }, 'Failed to retrieve plan');
+
+      throw new Error('Failed to retrieve plan');
+    }
+  }
+
   private async stripeProvider(): Promise<Stripe> {
     return createStripeClient();
   }