Update UI styling and add checkout redirect ability

This commit does two main things. First, it refactors UI styling in the alert component, changing the location of some utility classes and enhancing color gradients for different alert variants. Second, it introduces the ability to specify whether to redirect to checkout on the pricing page, thereby improving user experience. This adds more flexibility to the 'PricingTable' and 'CheckoutButton' components, allowing for optional redirection and enhanced configurability.

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

@@ -25,18 +25,22 @@ import { LineItemDetails } from './line-item-details';
 
 interface Paths {
   signUp: string;
+  subscription: string;
 }
 
 export function PricingTable({
   config,
   paths,
   CheckoutButtonRenderer,
+  redirectToCheckout = true,
   displayPlanDetails = true,
 }: {
   config: BillingConfig;
   paths: Paths;
   displayPlanDetails?: boolean;
 
+  redirectToCheckout?: boolean;
+
   CheckoutButtonRenderer?: React.ComponentType<{
     planId: string;
     highlighted?: boolean;
@@ -88,6 +92,7 @@ export function PricingTable({
               selectable
               key={plan.id}
               plan={plan}
+              redirectToCheckout={redirectToCheckout}
               primaryLineItem={primaryLineItem}
               product={product}
               paths={paths}
@@ -106,14 +111,14 @@ function PricingItem(
     className?: string;
     displayPlanDetails: boolean;
 
-    paths: {
-      signUp: string;
-    };
+    paths: Paths;
 
     selectable: boolean;
 
     primaryLineItem: z.infer<typeof LineItemSchema>;
 
+    redirectToCheckout?: boolean;
+
     plan: {
       id: string;
       lineItems: z.infer<typeof LineItemSchema>[];
@@ -251,10 +256,11 @@ function PricingItem(
             condition={props.plan.id && props.CheckoutButton}
             fallback={
               <DefaultCheckoutButton
-                signUpPath={props.paths.signUp}
+                paths={props.paths}
                 product={props.product}
                 highlighted={highlighted}
                 plan={props.plan}
+                redirectToCheckout={props.redirectToCheckout}
               />
             }
           >
@@ -410,12 +416,24 @@ function DefaultCheckoutButton(
       name: string;
     };
 
-    signUpPath: string;
+    paths: Paths;
+    redirectToCheckout?: boolean;
+
     highlighted?: boolean;
   }>,
 ) {
+  const redirectToCheckoutParam = props.redirectToCheckout
+    ? '?redirectToCheckout=true'
+    : '';
+
+  const planId = props.plan.id;
+  const signUpPath = props.paths.signUp;
+  const subscriptionPath = props.paths.subscription;
+
   const linkHref =
-    props.plan.href ?? `${props.signUpPath}?utm_source=${props.plan.id}` ?? '';
+    props.plan.href ??
+    `${signUpPath}?plan=${planId}&next=${subscriptionPath}?plan=${planId}${redirectToCheckoutParam}` ??
+    '';
 
   const label = props.plan.label ?? 'common:getStartedWithPlan';