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/gateway/src/components/pricing-table.tsx

@@ -153,7 +153,7 @@ function PricingItem(
       className={cn(
         props.className,
         `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg p-6 ring-2 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
+            rounded-lg p-6 ring-2 lg:w-4/12 xl:max-w-[19rem]`,
         {
           ['ring-primary']: highlighted,
           ['dark:shadow-primary/30 shadow-none ring-transparent dark:shadow-sm']:

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

@@ -127,4 +127,16 @@ 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);
+  }
 }