Refactor billing components and enhance UX

This commit includes significant changes to the layout and presentation of billing related components. The most notable updates are replacing the static back button in 'billing-session-status.tsx' with a fully clickable link button, and improving the product description lookup to use i18n in 'current-subscription-card.tsx'. Additionally, the general structure and spacing of elements within 'billing/page.tsx' are enhanced for better user experience.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -75,28 +75,24 @@ async function TeamAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <div className={'mx-auto w-full'}>
+        <div className={'mx-auto flex w-full max-w-2xl flex-col space-y-6'}>
-          <div>
+          <If
-            <div className={'flex flex-col space-y-6'}>
+            condition={subscription}
-              <If
+            fallback={
-                condition={subscription}
+              <>
-                fallback={
+                <Checkout />
-                  <>
+              </>
-                    <Checkout />
+            }
-                  </>
+          >
-                }
+            {(subscription) => (
-              >
+              <CurrentSubscriptionCard
-                {(subscription) => (
+                subscription={subscription}
-                  <CurrentSubscriptionCard
+                config={billingConfig}
-                    subscription={subscription}
+              />
-                    config={billingConfig}
+            )}
-                  />
+          </If>
-                )}
-              </If>
 
-              <BillingPortal />
+          <BillingPortal />
-            </div>
-          </div>
         </div>
       </PageBody>
     </>

packages/billing/gateway/src/components/billing-session-status.tsx

@@ -78,17 +78,15 @@ function SuccessSessionStatus({
           </p>
         </div>
 
-        <Button data-test={'checkout-success-back-button'} variant={'outline'}>
+        <Link data-test={'checkout-success-back-link'} href={redirectPath}>
-          <Link href={redirectPath}>
+          <Button>
-            <span className={'flex items-center space-x-2.5'}>
+            <span>
-              <span>
+              <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
-                <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
-              </span>
-
-              <ChevronRight className={'h-4'} />
             </span>
-          </Link>
+
-        </Button>
+            <ChevronRight className={'h-4'} />
+          </Button>
+        </Link>
       </div>
     </section>
   );

packages/billing/gateway/src/components/current-subscription-card.tsx

@@ -65,7 +65,7 @@ export function CurrentSubscriptionCard({
         </CardDescription>
       </CardHeader>
 
-      <CardContent className={'space-y-3 text-sm'}>
+      <CardContent className={'space-y-4 border-t pt-4 text-sm'}>
         <div className={'flex flex-col space-y-1'}>
           <div className={'flex items-center space-x-2 text-lg font-semibold'}>
             <BadgeCheck
@@ -75,11 +75,20 @@ export function CurrentSubscriptionCard({
             />
 
             <span data-test={'current-plan-card-product-name'}>
-              {product.name}
+              <Trans i18nKey={product.name} defaults={product.name} />
             </span>
 
             <CurrentPlanBadge status={subscription.status} />
           </div>
+
+          <div>
+            <p className={'text-muted-foreground'}>
+              <Trans
+                i18nKey={product.description}
+                defaults={product.description}
+              />
+            </p>
+          </div>
         </div>
 
         {/*